{% extends "base.html" %}

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

{% block main %}
{% if let BackendConfig::Email(email_data) = channel.backend_config %}
  {% include "breadcrumbs.html" %}
  <main class="container mt-5">
    <section class="mb-4">
      <h1>Channel Configuration</h1>
    </section>
    <section class="mb-4">
      <form
        method="post"
        action="{{ breadcrumbs.join("update-channel") }}"
      >
        <div class="mb-3">
          <label for="channel-name-input" class="form-label">Channel Name</label>
          <input
            type="text"
            class="form-control"
            id="channel-name-input"
            name="name"
            value="{{ channel.name }}"
          >
        </div>
        <div class="mb-3">
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              {% if channel.enable_by_default %}
                checked=""
              {% endif %}
              type="checkbox"
              name="enable_by_default"
              value="true"
              role="switch"
              id="channel-default-enabled-switch"
            >
            <label class="form-check-label" for="channel-default-enabled-switch">
              Enable by default for new projects in this team
            </label>
          </div>
        </div>
        <div class="mb-3">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="btn btn-primary" type="submit">Save</button>
        </div>
      </form>
    </section>
    <section class="mb-4">
      <form
        method="post"
        action="{{ breadcrumbs.join("update-email-recipient") }}"
      >
        <div class="mb-3">
          <label for="channel-recipient-input" class="form-label">Recipient Email</label>
          <input
            type="text"
            class="form-control"
            id="channel-recipient-input"
            name="recipient"
            value="{{ email_data.recipient }}"
            aria-describedby="channel-recipient-help"
          >
          <div id="channel-recipient-help" class="form-text">
            {% if email_data.verified %}
              Updating this will require verification of the new recipient.
            {% else %}
              Recipient must be verified before they can receive messages.
            {% endif %}
          </div>
        </div>
        <div class="mb-3">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="btn btn-primary" type="submit">Send Verification</button>
        </div>
      </form>
    </section>
    {% if email_data.recipient != "" && !email_data.verified %}
      <section class="mb-4">
        <form
          method="post"
          action="{{ breadcrumbs.join("verify-email") }}"
        >
          <div class="mb-3">
            <label for="channel-recipient-verification-code" class="form-label">
              Verification Code
            </label>
            <input
              type="text"
              class="form-control"
              name="code"
              id="channel-recipient-verification-code"
              aria-describedby="channel-recipient-verification-code-help"
            >
            <div id="channel-recipient-verification-code-help" class="form-text">
              Enter the most recent Shout.dev verification code for this address.
              <input
                type="submit"
                form="email-verification-form"
                class="btn btn-link align-baseline p-0"
                type="submit"
                style="font-size: inherit;"
                value="Re-send verification email"
              >
            </div>
          </div>
          <div class="mb-3">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <button class="btn btn-primary" type="submit">Verify</button>
          </div>
        </form>
        <form
          id="email-verification-form"
          method="post"
          action="{{ breadcrumbs.join("update-email-recipient") }}"
        >
          <input type="hidden" name="recipient" value="{{ email_data.recipient }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        </form>
      </section>
    {% endif %}
  </main>
{% endif %}
{% endblock %}
