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

{% block extrastyle %}
  {{ block.super }}
  <style>
    .collector-setup-form .form-table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
    }

    .collector-setup-form .form-table th,
    .collector-setup-form .form-table td {
      padding: 0.5rem;
      vertical-align: top;
    }

    .collector-setup-form .form-table th {
      width: 16rem;
      text-align: left;
    }

    .collector-setup-form .form-table td input[type="text"],
    .collector-setup-form .form-table td input[type="email"],
    .collector-setup-form .form-table td input[type="number"],
    .collector-setup-form .form-table td textarea,
    .collector-setup-form .form-table td select {
      box-sizing: border-box;
      max-width: min(100%, 56rem);
      width: 100%;
    }

    .collector-setup-form .form-table td textarea {
      min-height: 6rem;
      resize: vertical;
    }

    .collector-setup-form .form-table td .help {
      margin-top: 0.25rem;
      max-width: 56rem;
    }
  </style>
{% endblock %}

{% block content %}
  <div id="content-main">
    <form method="post" novalidate class="collector-setup-form">
      {% csrf_token %}
      {% if form.non_field_errors %}
        <p class="errornote">{{ form.non_field_errors }}</p>
      {% endif %}

      <fieldset class="module aligned">
        <h2>{% trans "Step 1: Configure Collector" %}</h2>
        <table class="form-table">
          <tbody>
            {% for field in form.visible_fields %}
              <tr class="form-row{% if field.errors %} errors{% endif %}">
                <th>{{ field.label_tag }}</th>
                <td>
                  {{ field.errors }}
                  {{ field }}
                  {% if field.help_text %}
                    <div class="help">{{ field.help_text|safe }}</div>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </fieldset>

      <div class="submit-row">
        {% if can_change %}
          <input type="submit" class="default" value="{% trans 'Save and run test' %}">
        {% else %}
          <p class="help">{% trans "You have view access to this collector configuration, but not permission to change it." %}</p>
        {% endif %}
        <a href="{{ change_url }}" class="closelink">{% trans "Back to inbox" %}</a>
      </div>
    </form>

    <fieldset class="module aligned">
      <h2>{% trans "Step 2: Review Test Results" %}</h2>
      {% if results %}
        <ul class="messagelist">
          {% for message in results %}
            <li class="success">
              <strong>{% firstof message.subject '(no subject)' %}</strong>
              <div class="help">{% firstof message.from '' %}</div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p>{% trans "Run the test to preview matching messages." %}</p>
      {% endif %}
    </fieldset>
  </div>
{% endblock %}