{% extends "pages/challenge_settings_base.html" %}
{% load url %}
{% load static %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a
                href="{% url 'challenges:list' %}">Challenges</a>
        </li>
        <li class="breadcrumb-item"><a
                href="{{ challenge.get_absolute_url }}">{% firstof challenge.title challenge.short_name %}</a></li>
        <li class="breadcrumb-item active"
            aria-current="page">Pages
        </li>
    </ol>
{% endblock %}

{% block content %}

    <h2>Pages for {{ challenge.short_name }}</h2>

    <p><a class="btn btn-primary"
          href="{% url 'pages:create' challenge_short_name=challenge.short_name %}">
        <i class="fa fa-plus"></i> Add a new page
    </a></p>

    <div class="table-responsive">
        <table class="table table-hover table-borderless table-sm" id="pagesTable">
            <thead class="thead-light">
            <tr>
                <th>Order</th>
                <th>Title (in URL)</th>
                <th>Display Title</th>
                <th>Visible to</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody>
            {% for page in object_list %}
                <tr>
                    <td>
                        {{ page.order }}
                    </td>
                    <td>
                        <a href="{{ page.get_absolute_url }}">{{ page.slug }}</a>
                    </td>
                    <td>
                        <a href="{{ page.get_absolute_url }}">
                            {{ page|title }}
                        </a>
                    </td>
                    <td data-order="{{ page.hidden }}">
                        {% if page.hidden %}
                            <i class="fa fa-eye-slash text-danger"
                               title="Page is not listed in the challenge menu"></i>
                        {% else %}
                            <i class="fa fa-eye text-success"
                               title="Page is listed in the challenge menu"></i>
                        {% endif %}
                        {% if page.permission_level == page.ADMIN_ONLY %}
                            <span class="badge badge-danger">Admins Only</span>
                        {% elif page.permission_level == page.REGISTERED_ONLY %}
                            <span class="badge badge-warning">Participants Only</span>
                        {% elif page.permission_level == page.ALL %}
                            <span class="badge badge-success">Everyone</span>
                        {% endif %}
                    </td>
                    <td>
                        <a href="{% url 'pages:update' challenge_short_name=challenge.short_name slug=page.slug %}">
                            <i class="fa fa-edit" title="Edit Page"></i>
                        </a>
                    </td>
                    <td>
                        <a href="{% url 'pages:delete' challenge_short_name=challenge.short_name slug=page.slug %}">
                            <i class="fa fa-trash text-danger"
                               title="Delete Page"></i>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="module" src="{% static 'pages/js/page_list.mjs' %}"></script>

{% endblock %}