{% extends "admin/base.html" %}

{% block title %}Redirects | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">SEO</p>
    <h1>Redirects</h1>
    <p class="mt-3 text-sm font-bold text-zinc-600">Preserve old public URLs when page or inventory slugs change.</p>
  </div>
</div>

<section class="admin-panel mt-8">
  <h2>Add Redirect</h2>
  <form class="mt-5 grid gap-4 lg:grid-cols-[1fr_1fr_120px_1fr_auto]" method="post">
    <label><span class="form-label">Old path</span><input class="form-input" name="old_path" placeholder="/en/old-page"></label>
    <label><span class="form-label">New path</span><input class="form-input" name="new_path" placeholder="/en/new-page"></label>
    <label><span class="form-label">Code</span><select class="form-input" name="status_code"><option>301</option><option>302</option><option>307</option><option>308</option></select></label>
    <label><span class="form-label">Notes</span><input class="form-input" name="notes" placeholder="optional"></label>
    <button class="btn-primary self-end" type="submit">Add</button>
  </form>
</section>

<section class="mt-6 overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm">
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-zinc-200">
      <thead class="bg-zinc-100">
        <tr>
          <th class="table-heading">Old path</th>
          <th class="table-heading">New path</th>
          <th class="table-heading">Code</th>
          <th class="table-heading">Notes</th>
          <th class="table-heading">Created</th>
          <th class="table-heading">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-zinc-200">
        {% for redirect_row in redirects %}
          <tr>
            <td class="table-cell">
              <form id="redirect-form-{{ redirect_row.id }}" method="post"></form>
              <input form="redirect-form-{{ redirect_row.id }}" type="hidden" name="redirect_id" value="{{ redirect_row.id }}">
              <input form="redirect-form-{{ redirect_row.id }}" class="form-input min-w-72" name="old_path" value="{{ redirect_row.old_path }}">
            </td>
            <td class="table-cell"><input form="redirect-form-{{ redirect_row.id }}" class="form-input min-w-72" name="new_path" value="{{ redirect_row.new_path }}"></td>
            <td class="table-cell">
              <select form="redirect-form-{{ redirect_row.id }}" class="form-input" name="status_code">
                {% for code in [301,302,307,308] %}
                  <option value="{{ code }}" {% if redirect_row.status_code == code %}selected{% endif %}>{{ code }}</option>
                {% endfor %}
              </select>
            </td>
            <td class="table-cell"><input form="redirect-form-{{ redirect_row.id }}" class="form-input min-w-48" name="notes" value="{{ redirect_row.notes or '' }}" placeholder="optional"></td>
            <td class="table-cell text-xs font-bold text-zinc-500">{{ redirect_row.created_at }}</td>
            <td class="table-cell">
              <div class="flex flex-wrap gap-2">
                <button form="redirect-form-{{ redirect_row.id }}" class="btn-outline py-2" type="submit" name="redirect_action" value="save">Save</button>
                <button form="redirect-form-{{ redirect_row.id }}" class="btn-outline py-2" type="submit" name="redirect_action" value="delete">Delete</button>
              </div>
            </td>
          </tr>
        {% else %}
          <tr><td class="table-cell text-zinc-500" colspan="6">No custom redirects yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}