{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block flash_mode %}toast-success{% endblock %}

{% block extra_css %}
  <link rel="stylesheet" href="{{ url_for('static', filename='nav.css', v=asset_version('nav.css')) }}">
  <style>
    .navbar.navbar-expand-lg { display: none; }
    .internal-rules-page {
      margin: -1rem -15px 0;
      min-height: calc(100vh - 58px);
      background: linear-gradient(180deg, #f7fafc 0%, #f2f6fb 100%);
    }
    .internal-rules-content {
      max-width: 1180px;
      margin: 0 auto;
      padding: 22px 28px 34px;
    }
    .internal-rules-layout {
      display: grid;
      grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
      gap: 1rem;
    }
    .internal-rules-card {
      background: #fff;
      border: 1px solid #d7dde5;
      border-radius: 0.75rem;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
      padding: 1rem;
    }
    .internal-rules-table td,
    .internal-rules-table th {
      vertical-align: middle;
    }
    .internal-rules-table .form-control,
    .internal-rules-table .custom-select {
      min-width: 0;
    }
    .internal-rules-empty {
      border: 1px dashed #cbd5e1;
      border-radius: 0.75rem;
      padding: 1rem;
      background: #f8fafc;
    }
    @media (max-width: 991.98px) {
      .internal-rules-layout {
        grid-template-columns: 1fr;
      }
    }
  </style>
{% endblock %}

{% block body %}
  <div class="internal-rules-page">
    {% include "_topnav.html" %}
    <div class="internal-rules-content">
      <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">
        <div>
          <h1 class="h3 mb-1">{{ page_title }}</h1>
          <p class="text-muted mb-0">{{ page_description }}</p>
        </div>
        <div class="text-muted small mt-2 mt-lg-0">{{ active_rule_count }} active rule{{ '' if active_rule_count == 1 else 's' }}</div>
      </div>

      <div class="internal-rules-layout">
        <section class="internal-rules-card">
          <h2 class="h5 mb-1">Add Rule</h2>
          <p class="text-muted small mb-3">Use exact addresses for named mailboxes. Domain rules apply to any sender ending in that domain.</p>
          <form method="post">
            <input type="hidden" name="form_action" value="save">
            <div class="form-group">
              <label for="match_type">Match Type</label>
              <select class="custom-select" id="match_type" name="match_type">
                <option value="exact">Exact email address</option>
                <option value="domain">Domain</option>
              </select>
            </div>
            <div class="form-group">
              <label for="match_value">Value</label>
              <input class="form-control" id="match_value" name="match_value" placeholder="name@example.com or example.com" required>
            </div>
            <div class="form-group">
              <label for="notes">Notes</label>
              <input class="form-control" id="notes" name="notes" placeholder="Optional description">
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
              <label class="form-check-label" for="is_active">Active</label>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Add Rule</button>
          </form>
        </section>

        <section class="internal-rules-card">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
              <h2 class="h5 mb-1">Configured Rules</h2>
              <p class="text-muted small mb-0">Changes update {{ classifier_label }} classification across the inbox.</p>
            </div>
          </div>

          {% if rules %}
            <div class="table-responsive">
              <table class="table table-sm internal-rules-table">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Value</th>
                    <th>Notes</th>
                    <th>Active</th>
                    <th class="text-right">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for rule in rules %}
                    <tr>
                      <td>
                        <select class="custom-select custom-select-sm" name="match_type" form="rule-form-{{ rule.id }}">
                          <option value="exact" {% if rule.match_type == 'exact' %}selected{% endif %}>Exact</option>
                          <option value="domain" {% if rule.match_type == 'domain' %}selected{% endif %}>Domain</option>
                        </select>
                      </td>
                      <td>
                        <input class="form-control form-control-sm" name="match_value" value="{{ rule.match_value }}" form="rule-form-{{ rule.id }}" required>
                      </td>
                      <td>
                        <input class="form-control form-control-sm" name="notes" value="{{ rule.notes }}" form="rule-form-{{ rule.id }}">
                      </td>
                      <td>
                        <div class="form-check mb-0">
                          <input class="form-check-input" type="checkbox" name="is_active" form="rule-form-{{ rule.id }}" {% if rule.is_active %}checked{% endif %}>
                        </div>
                      </td>
                      <td class="text-right">
                        <form id="rule-form-{{ rule.id }}" method="post" class="d-inline-block mb-0">
                          <input type="hidden" name="form_action" value="save">
                          <input type="hidden" name="rule_id" value="{{ rule.id }}">
                          <button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
                        </form>
                        <form method="post" class="d-inline-block ml-1 mb-0">
                          <input type="hidden" name="form_action" value="delete">
                          <input type="hidden" name="rule_id" value="{{ rule.id }}">
                          <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
                        </form>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% else %}
            <div class="internal-rules-empty text-muted">
              No {{ classifier_label|lower }} rules configured yet. Add at least one rule to start classifying matching senders automatically on the inbox.
            </div>
          {% endif %}
        </section>
      </div>
    </div>
  </div>
{% endblock %}