{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %}
{% load nomcom_tags %}
{% load ietf_filters %}
{% block title %}
    NomCom {{ year }}
    {% block subtitle %}{% endblock %}
{% endblock %}
{% block content %}
    {% origin %}
    {% with selected=request.path|split:'/'|slice:'3:-1'|join:'-' %}
    <h1>
        NomCom {{ year }}
        {% if nomcom.group.state_id == 'conclude' %}<span class="badge rounded-pill text-bg-info">Concluded</span>{% endif %}
    </h1>
    <ul class="nav nav-tabs my-3">
        <li class="nav-item">
            <a class="nav-link {% if selected == '' %}active{% endif %}"
               href="{% url 'ietf.nomcom.views.year_index' year %}">
                Home
            </a>
        </li>
        {% if nomcom|has_publickey %}
            <li class="nav-item">
                <a class="nav-link {% if selected == "nominate" %}active{% endif %}"
                   href="{% url 'ietf.nomcom.views.public_nominate' year %}">
                    Nominate
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if selected == "feedback" %}active{% endif %}"
                   href="{% url 'ietf.nomcom.views.public_feedback' year %}">
                    Provide feedback
                </a>
            </li>
        {% endif %}
        <li class="nav-item">
            <a class="nav-link {% if selected == "expertise" %}active{% endif %}"
               href="{% url 'ietf.nomcom.views.requirements' year %}">
                Desired expertise
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if selected == "questionnaires" %}active{% endif %}"
               href="{% url 'ietf.nomcom.views.questionnaires' year %}">
                Questionnaires
            </a>
        </li>
        {% if user|is_chair_or_advisor:year or user|has_role:"Secretariat" %}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle {% if selected in 'eligible,volunteers'|split:',' %}active{% endif %}" data-bs-toggle="dropdown" href="#">Volunteers</a>
                <ul class="dropdown-menu mt-n1" role="menu">
                    <li class="nav-item">
                        <a class="dropdown-item {% if selected == 'eligible' %}active{% endif %}"
                           href="{% url 'ietf.nomcom.views.public_eligible' year %}">View eligible</a>
                    </li>
                    <li class="nav-item">
                        <a class="dropdown-item {% if selected == 'volunteers' %}active{% endif %}"
                           href="{% url 'ietf.nomcom.views.public_volunteers' year %}">View volunteers</a>
                    </li>
                </ul>
            </li>
        {% endif %}
    </ul>
    {% block nomcom_content %}{% endblock %}
    {% endwith %}
{% endblock %}
{% block js %}
    <script>
        $(document)
            .ready(function () {
                // Javascript to enable link to tab
                var url = document.location.toString();
                if (url.match('#')) {
                    $('.nav-tabs button[data-bs-target="#' + url.split('#')[1] + '"]')
                        .tab('show');
                }
                // Change hash for page-reload
                $('.nav-tabs button')
                    .on('shown.bs.tab', function (e) {
                        history.replaceState(null, null, e.currentTarget.dataset.bsTarget);
                    });
            });
    </script>
{% endblock %}