{% 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 .help {
      color: var(--body-quiet-color);
      margin: 0.1rem 0 0.35rem;
    }
    .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 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>
      <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" />
          <a class="button" href="{{ changelist_url }}">{% trans "Cancel" %}</a>
        </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 %}