{% extends "base.html" %}

{% block title %}networks - irc.now{% endblock %}

{% block banner %}{% include "partials/announcement.html" %}{% endblock %}
{% block flash %}{% include "partials/flash.html" %}{% endblock %}
{% block content %}
<div class="content">
  <h1>networks</h1>
  {% if is_pro %}
  <div class="card">
    <form method="post" action="/networks/create"
          hx-post="/networks/create" hx-target="#network-result" hx-swap="innerHTML">
      <div class="form-group" style="margin-bottom: 14px;">
        <label for="name">network name</label>
        <input type="text" id="name" name="name" placeholder="my-network" required class="input">
      </div>
      <div class="form-group" style="margin-bottom: 14px;">
        <label for="title">display title <span style="color: var(--text-3);">(optional)</span></label>
        <input type="text" id="title" name="title" placeholder="my irc network" class="input">
      </div>
      <button type="submit" class="btn-fill">
        <span class="htmx-hide-on-request">create network</span>
        <span class="htmx-indicator">creating...</span>
      </button>
    </form>
  </div>
  <div id="network-result"></div>
  {% else %}
  <div class="card">
    <p>network hosting is available on the pro plan.</p>
    <a href="/billing" class="btn-fill">upgrade to pro</a>
  </div>
  {% endif %}
  {% for network in networks %}
  <a href="/networks/{{ network.name }}" style="text-decoration: none; color: inherit;">
    <div class="card">
      <h2>{{ network.name }}</h2>
      <p>{{ network.hostname }} -- {% if network.ready %}<span style="color: var(--g);">ready</span>{% else %}<span style="color: #E08080;">not ready</span>{% endif %}</p>
    </div>
  </a>
  {% endfor %}
</div>
{% endblock %}