{# bs5ok #}
{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
{% load origin %}
{% origin %}
{% load ietf_filters static django_bootstrap5 person_filters %}
{% block pagehead %}
    <link rel="stylesheet" href="{% static 'ietf/css/datepicker.css' %}">
    <link rel="stylesheet" href="{% static 'ietf/css/list.css' %}">
{% endblock %}
{% block title %}Change {{ group.acronym }} reviewer settings for {{ reviewer_email }}{% endblock %}
{% block content %}
    {% origin %}
    <h1>
        Change {{ group.acronym }} reviewer settings
        <br>
        <small class="text-muted">{{ reviewer_email }}</small>
    </h1>
    <h2 class="mt-5">Settings</h2>
    <form class="my-3 change-reviewer-settings" method="post">
        {% csrf_token %}
        {% bootstrap_form settings_form %}
        <a href="{{ back_url }}" class="btn btn-secondary float-end">Back</a>
        <button class="btn btn-primary"
                type="submit"
                name="action"
                value="change_settings">Save</button>
    </form>
    <h2 class="mt-5">Unavailable periods</h2>
    <p>
        You can register periods where reviews should not be assigned.
    </p>
    {% if unavailable_periods %}
        <table class="table table-sm tablesorter">
            <thead>
                <tr>
                    <th data-sort="date">Period</th>
                    <th data-sort="availability">Availability</th>
                    <th data-sort="reason">Reason</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            {% for o in unavailable_periods %}
                <tr class="unavailable-period-{{ o.state }}">
                    <td>{{ o.start_date|default:"indefinite" }} - {{ o.end_date|default:"indefinite" }}</td>
                    <td>{{ o.get_availability_display }}</td>
                    <td>{{ o.reason }}</td>
                    <td>
                        {% if not o.end_date %}
                            <form class="row row-cols-sm-auto g-3 align-items-center" method="post">
                                {% csrf_token %}
                                <input type="hidden" name="period_id" value="{{ o.pk }}">
                                {% bootstrap_form o.end_form layout="inline" size="sm" %}
                                <button type="submit"
                                        class="btn btn-primary btn-sm"
                                        name="action"
                                        value="end_period">End period</button>
                            </form>
                        {% endif %}
                    </td>
                    <td class="text-end">
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="period_id" value="{{ o.pk }}">
                            <button type="submit"
                                    class="btn btn-danger btn-sm"
                                    name="action"
                                    value="delete_period">Delete</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
        </table>
    {% else %}
        <p class="alert alert-info my-3">
            No periods found.
        </p>
    {% endif %}
    <div class="my-3">
        <a class="btn btn-primary"
           data-bs-toggle="collapse"
           data-bs-target="#add-new-period">Add a new period</a>
    </div>
    <div id="add-new-period"
         {% if not period_form.errors %}class="collapse"{% endif %}>
        <form method="post">
            {% csrf_token %}
            {% bootstrap_form period_form %}
            <button type="submit"
                    class="btn btn-primary"
                    name="action"
                    value="add_period">Add period</button>
        </form>
    </div>
    <h2 class="mt-5">History of settings</h2>
    <div id="history">
        <table class="table table-sm table-striped tablesorter">
            <thead>
                <tr>
                    <th data-sort="date">Date</th>
                    <th data-sort="by">By</th>
                    <th data-sort="description">Description</th>
                </tr>
            </thead>
            <tbody>
                {% for h in reviewersettings.history.all %}
                    <tr>
                        <td>{{ h.history_date|date }}</td>
                        <td>{% person_link h.history_user.person %}</td>
                        <td>{{ h.history_change_reason }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <h2 class="mt-5">History of unavailable periods</h2>
    <div id="history">
        <table class="table table-sm table-striped tablesorter">
            <thead>
                <tr>
                    <th dta-sort="date">Date</th>
                    <th dta-sort="by">
                        By
                    </th>
                    <th dta-sort="description">
                        Description
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for h in unavailable_periods_history.all %}
                    <tr>
                        <td>
                            {{ h.history_date|date }}
                        </td>
                        <td>
                            {% person_link h.history_user.person %}
                        </td>
                        <td>
                            {{ h.history_change_reason }}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p style="padding-top: 2em;">
        <a href="{{ back_url }}" class="btn btn-primary">
            Back
        </a>
    </p>
{% endblock %}
{% block js %}
    <script src="{% static 'ietf/js/datepicker.js' %}">
    </script>
    <script src="{% static 'ietf/js/list.js' %}">
    </script>
{% endblock %}