{% extends "admin/base_site.html" %}
{% load i18n %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    › <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
    › <a href="{{ changelist_url }}">{{ opts.verbose_name_plural|capfirst }}</a>
    › {% trans "Slack bot wizard" %}
  </div>
{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .slack-wizard {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
      gap: 1.5rem;
    }
    .slack-wizard .module {
      margin: 0;
    }
    .slack-wizard__aside {
      background: var(--darkened-bg);
      border: 1px solid var(--hairline-color);
      border-radius: 10px;
      padding: 1rem 1.25rem;
    }
    .slack-wizard__list {
      margin: 0.5rem 0 0;
      padding-left: 1.25rem;
    }
    .slack-wizard__list li + li {
      margin-top: 0.35rem;
    }
    .slack-wizard__form .aligned label {
      width: 220px;
    }
    .slack-wizard__form .field-box {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .slack-wizard__form .field-box input[type="text"],
    .slack-wizard__form .field-box input[type="password"],
    .slack-wizard__form .field-box input[type="email"],
    .slack-wizard__form .field-box textarea {
      max-width: 100%;
      width: min(100%, 620px);
    }
    .slack-wizard__form .help {
      color: var(--body-quiet-color);
      margin: 0.1rem 0 0.35rem;
    }
    .slack-wizard__status {
      align-items: center;
      color: var(--success-fg, #2e7d32);
      display: inline-flex;
      font-weight: 600;
      gap: 0.35rem;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .slack-wizard__status::before {
      content: "\2713";
      font-size: 1rem;
      line-height: 1;
    }
    .slack-wizard__status.is-valid {
      opacity: 1;
    }
    .slack-wizard__actions {
      margin-top: 1rem;
    }
    @media (max-width: 992px) {
      .slack-wizard {
        grid-template-columns: 1fr;
      }
      .slack-wizard__form .aligned label {
        width: 160px;
      }
    }
  </style>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const validators = {
        id_client_id: (value) => /^(\d{9,})\.(\d{9,})$/.test(value.trim()),
        id_client_secret: (value) => /^[A-Za-z0-9]{20,}$/.test(value.trim()),
        id_signing_secret: (value) => /^[A-Za-z0-9]{32}$/.test(value.trim()),
        id_scopes: (value) => {
          const trimmed = value.trim();
          return (
            trimmed === "" ||
            /^[A-Za-z0-9_:\-]+(\s*,\s*[A-Za-z0-9_:\-]+)*$/.test(trimmed)
          );
        },
      };

      Object.entries(validators).forEach(([fieldId, validator]) => {
        const input = document.getElementById(fieldId);
        if (!input) {
          return;
        }

        const status = document.createElement("span");
        status.className = "slack-wizard__status";
        status.setAttribute("aria-live", "polite");
        status.textContent = "Format looks good";
        input.insertAdjacentElement("afterend", status);

        const updateStatus = () => {
          const isValid = validator(input.value);
          status.classList.toggle("is-valid", isValid);
        };

        input.addEventListener("input", updateStatus);
        updateStatus();
      });
    });
  </script>
{% endblock %}

{% block content %}
  <div class="slack-wizard">
    <div class="module">
      <h2>{% trans "Connect a Slack bot" %}</h2>
      <p>{% trans "Provide the OAuth details from your Slack app so the wizard can start the authorization flow." %}</p>
      {% if callback_host_error %}
        <p class="errornote">
          {% blocktrans with host=callback_host %}Slack authorization requires a domain-based callback URL. Configure this node with a hostname instead of {{ host }} to continue.{% endblocktrans %}
        </p>
      {% endif %}
      <form method="post" novalidate class="slack-wizard__form">
        {% csrf_token %}
        <div>
          {{ form.non_field_errors }}
          {% for field in form %}
            <div class="form-row aligned">
              <div class="flex-container">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                <div class="field-box">{{ field }}</div>
              </div>
              {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
              {{ field.errors }}
            </div>
          {% endfor %}
        </div>
        <div class="slack-wizard__actions">
          <input type="submit" value="{% trans 'Continue to Slack' %}" class="default" {% if disable_submit %}disabled aria-disabled="true"{% endif %} />
        {% if callback_host_error %}
          <p class="help">
            {% trans "Set a public domain for this node so the redirect URL matches your Slack app configuration." %}
          </p>
        {% endif %}
      </div>
    </form>
  </div>
    <div class="slack-wizard__aside">
      <h3>{% trans "How to find these values" %}</h3>
      <ol class="slack-wizard__list">
        <li>{% trans "Create or open your Slack app at api.slack.com/apps." %}</li>
        <li>{% trans "From Basic Information, copy the Client ID, Client Secret, and Signing Secret." %}</li>
        <li>
          {% blocktrans %}Add <code>{{ callback_url }}</code> as a Redirect URL in the Slack app's OAuth settings.{% endblocktrans %}
        </li>
        <li>
          {% blocktrans %}Use comma-separated OAuth scopes (for example, {{ default_scope }}).{% endblocktrans %}
        </li>
      </ol>
    </div>
  </div>
{% endblock %}