{% extends "freeform/_layouts/settings" %}
{% hook "freeform.prepareCpTemplate" %}

{% if craft.app.version >= '5.0.0' %}
    {% css %}
        .color-indicator.status {
            &.red { background-color: #dc2626 !important; }
            &.orange { background-color: #fb923c !important; }
            &.amber { background-color: #f59e0b !important; }
            &.rose { background-color: #f43f5e !important; }
            &.pink { background-color: #ec4899 !important; }
            &.lime { background-color: #84cc16 !important; }
            &.emerald { background-color: #10b981 !important; }
            &.teal { background-color: #11a697 !important; }
            &.green { background-color: #16a34a !important; }
            &.yellow { background-color: #eab308 !important; }
            &.violet { background-color: #8b5cf6 !important; }
            &.indigo { background-color: #6366f1 !important; }
            &.fuchsia { background-color: #d946ef !important; }
            &.purple { background-color: #a855f7 !important; }
            &.cyan { background-color: #06b6d4 !important; }
            &.sky { background-color: #0ea5e9 !important; }
            &.blue { background-color: #2563eb !important; }
            &.gray { background-color: #606d7b !important; }
            &.white { background-color: #ffffff !important; }
            &.black { background-color: #000000 !important; }
        }
    {% endcss %}
{% endif %}

{% set crumbs = [
    { label: craft.freeform.name, url: url("freeform") },
    { label: "Settings"|t("freeform"), url: url("freeform/settings") },
] %}

{% set selectedSubnavItem = "statuses" %}

{% block actionButton %}

    {% if currentUser.can("freeform-settingsAccess") %}
        <div class="buttons">
            <a class="btn submit add icon" href="{{ url('freeform/settings/statuses/new/') }}">
                {{ "New Status"|t('freeform') }}
            </a>
        </div>
    {% endif %}

{% endblock %}

{% set title = "Statuses"|t('freeform') %}

{% set content %}

    {% if statuses|length %}
        <table id="statuses" class="data fullwidth collapsible">
            <thead>
            <th scope="col">{{ "Name"|t('freeform') }}</th>
            <th scope="col">{{ "Handle"|t('freeform') }}</th>
            <th scope="col">{{ "Default"|t('freeform') }}</th>
            <th class="thin"></th>
            <th class="thin"></th>
            </thead>
            <tbody>
            {% for status in statuses %}
                <tr data-id="{{ status.id }}" data-name="{{ status.name|t('freeform') }}">
                    <th scope="row" data-title="{{ 'Name'|t('freeform') }}">
                        {% if craft.app.version < '5.0.0' %}
                            <span class="color-indicator" style="background: {{ status.colorHex }};"></span>
                        {% else %}
                            <span class="color-indicator status {{ status.color }}"></span>
                        {% endif %}
                        {% if currentUser.can("freeform-settingsAccess") %}
                            <a href="{{ url('freeform/settings/statuses/' ~ status.id) }}">
                                {{ status.name }}
                            </a>
                        {% else %}
                            {{ status.name }}
                        {% endif %}
                    </th>
                    <td data-title="{{ 'Handle'|t('freeform') }}">
                        <code>
                            {{ status.handle }}
                        </code>
                    </td>
                    <td>{% if status.id == defaultStatusId %}<span data-icon="check"></span>{% endif %}</td>
                    <td class="thin">
                        {% if currentUser.can("freeform-settingsAccess") and (statuses|length) > 1 %}
                            <a class="move icon" title="{{ 'Reorder'|t('freeform') }}" role="button"></a>
                        {% endif %}
                    </td>
                    <td class="thin">
                        {% if currentUser.can("freeform-settingsAccess") and status.id != defaultStatusId and (statuses|length) > 1 %}
                            <a class="delete icon" title="{{ 'Delete'|t('freeform') }}" role="button"></a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="zilch">
            {{ "No statuses exist yet."|t('freeform') }}
        </div>
    {% endif %}
{% endset %}

{% css %}
    #content { padding: 0; }
{% endcss %}

{% js %}
    var adminTable = new Craft.AdminTable({
        tableSelector: '#statuses',
        noObjectsSelector: '#nostatuses',
        newObjectBtnSelector: '#newstatuscontainer',
        deleteAction: 'freeform/statuses/delete',
        confirmDeleteMessage: '{{ "Are you sure you want to delete this status?"|t('freeform') }}',
        sortable: true,
        reorderAction: 'freeform/statuses/reorder',
        reorderSuccessMessage: '{{ "Success"|t('freeform') }}',
        reorderFailMessage:    '{{ "Failed"|t('freeform') }}',
    });
{% endjs %}
