{%- import "partials/_ui.html" as ui -%}
<div id="promo-codes-list">
    {% if promo_codes.is_empty() %}
    {% call ui::empty_state("", "No promo codes yet. Create one above to offer discounts, free access, or trial periods to your fans.") %}
    {% else %}
    <table class="data-table">
        <thead>
            <tr>
                <th>Code</th>
                <th>Type</th>
                <th>Uses</th>
                <th>Scope</th>
                <th>Schedule</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for code in promo_codes %}
            <tr{% if code.is_expired %} class="promo-codes-row--expired"{% else if code.is_not_yet_active %} class="promo-codes-row--pending"{% endif %}>
                <td>
                    <code class="key-code" title="Click to copy" onclick="navigator.clipboard.writeText('{{ code.code }}')">
                        {{ code.code }}
                    </code>
                </td>
                <td>{{ code.description }}</td>
                <td>
                    {% if code.use_count > 0 %}
                    <button class="btn-link btn-sm" type="button"
                            onclick="showPromoRedemptions('{{ code.id }}', '{{ code.code }}')"
                            title="Show who redeemed this code">
                        {{ code.use_count }}{% if let Some(max) = code.max_uses %} / {{ max }}{% else %} / &infin;{% endif %}
                    </button>
                    {% else %}
                    {{ code.use_count }}{% if let Some(max) = code.max_uses %} / {{ max }}{% else %} / &infin;{% endif %}
                    {% endif %}
                </td>
                <td>
                    {% if let Some(title) = code.item_title %}
                    {{ title }}
                    {% else if let Some(title) = code.project_title %}
                    {{ title }}
                    {% else %}
                    All items
                    {% endif %}
                </td>
                <td class="promo-codes-schedule">
                    {% if let Some(start) = code.starts_at %}
                    <div{% if code.is_not_yet_active %} class="promo-codes-schedule-pending"{% endif %}>
                        {% if code.is_not_yet_active %}Starts{% else %}Started{% endif %} {{ start }}
                    </div>
                    {% endif %}
                    {% if let Some(exp) = code.expires_at %}
                    <div{% if code.is_expired %} class="promo-codes-schedule-expired"{% endif %}>
                        {% if code.is_expired %}Expired{% else %}Expires{% endif %} {{ exp }}
                    </div>
                    {% endif %}
                    {% if code.starts_at.is_none() && code.expires_at.is_none() %}
                    <span class="promo-codes-schedule-none">No schedule</span>
                    {% endif %}
                </td>
                <td class="promo-codes-actions">
                    <button class="btn-secondary small promo-codes-edit-btn"
                            onclick="this.closest('tr').nextElementSibling.classList.toggle('hidden')">Edit</button>
                    <button class="btn btn-sm btn-danger"
                            hx-delete="/api/promo-codes/{{ code.id }}"
                            hx-target="#promo-codes-list"
                            hx-swap="outerHTML"
                            hx-confirm="Delete this code? It will no longer be usable.">
                        Delete
                    </button>
                </td>
            </tr>
            <tr class="hidden promo-codes-edit-row">
                <td colspan="6" class="promo-codes-edit-cell">
                    <form class="promo-codes-edit-form"
                          hx-put="/api/promo-codes/{{ code.id }}"
                          hx-target="#promo-codes-list"
                          hx-swap="outerHTML">
                        <div>
                            <label class="promo-codes-edit-label">Max uses</label>
                            <input type="number" name="max_uses" min="1" placeholder="Unlimited"
                                   value="{{ code.max_uses_raw }}"
                                   class="promo-codes-edit-input input--sm w-100">
                        </div>
                        <div>
                            <label class="promo-codes-edit-label">Starts</label>
                            <input type="date" name="starts_at"
                                   value="{{ code.starts_at_raw.as_deref().unwrap_or_default() }}"
                                   class="promo-codes-edit-input input--sm">
                        </div>
                        <div>
                            <label class="promo-codes-edit-label">Expires</label>
                            <input type="date" name="expires_at"
                                   value="{{ code.expires_at_raw.as_deref().unwrap_or_default() }}"
                                   class="promo-codes-edit-input input--sm">
                        </div>
                        <button class="btn-secondary small promo-codes-edit-save" type="submit">Save</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="promo-codes-bulk-row">
        <button class="btn-secondary small promo-codes-bulk-btn"
                hx-delete="/api/promo-codes/expired"
                hx-target="#promo-codes-list"
                hx-swap="outerHTML"
                hx-confirm="Delete all expired promo codes?">Delete all expired</button>
    </div>
    {% endif %}
</div>