{% extends "base.html" %}

{% block title %}Shout.dev: Channels{% endblock %}

{% block main %}
{% include "breadcrumbs.html" %}
<main class="container mt-5">
  <section class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
      <h1>Channels</h1>
      <div>
        <div class="dropdown">
          <!-- FIXME: a11y https://getbootstrap.com/docs/5.3/components/dropdowns/#accessibility -->
          <button
            class="btn btn-primary dropdown-toggle"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            New Channel
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item disabled" href="#">Slack (coming soon)</a></li>
            <li>
                <form
                  method="post"
                  action="{{ base_path }}/teams/{{ nav_state.team_id.unwrap().simple() }}/new-channel"
                >
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="channel_type" value="email">
                <button class="dropdown-item" type="submit">Email</button>
              </form>
            </li>
            <li><a class="dropdown-item disabled" href="#">SMS (coming soon)</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <div class="alert alert-primary" role="alert">
    Channels are places to send messages, alerts, and so on. Once created, they
    can be connected to specific projects at the
    <a
      href="{{ base_path }}/teams/{{ nav_state.team_id.unwrap().simple() }}/projects"
    >Projects page</a>.
  </div>
  <section class="mb-3">
    <table class="table">
      <tbody>
        {% for channel in channels %}
          <tr>
            <td>
              <a href="{{ base_path }}/teams/{{ nav_state.team_id.unwrap().simple() }}/channels/{{ channel.id.simple() }}">
                {{ channel.name }}
              </a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
</main>
{% endblock %}