{% extends "base.html" %}

{% load humanize %}

{% block title %}
    <title>{{ request.site.name }} Session Details</title>
{% endblock title %}


{% block content %}

    <!-- Modal: Terminate -->
    <div class="modal fade"
         id="terminateModal"
         tabindex="-1"
         aria-labelledby="terminateModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="terminateModalLabel">Terminate Session?</h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    {% include "diop/session_details_list.html" %}

                    <form method="post" action="{% url 'session_details' session.uid %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="terminate">
                        <input type="hidden" name="session.uid" value="{{ session.uid }}">
                        <button class="btn btn-danger btn-block m-2 mb-4 p-1" type="submit">Confirm</button>
                        <button type="button"
                                class="btn btn-outline-secondary btn-block m-2 mb-4 p-1"
                                data-bs-dismiss="modal">Cancel</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <!-- Modal: Terminate -->


    <!-- Modal: Disconnect -->
    <div class="modal fade"
         id="disconnectModal"
         tabindex="-1"
         aria-labelledby="disconnectModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="disconnectModalLabel">
                        Disconnect
                        Session?
                    </h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    {% include "diop/session_details_list.html" %}

                    <form method="post" action="{% url 'session_details' session.uid %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="disconnect">
                        <input type="hidden" name="session.uid" value="{{ session.uid }}">
                        <button class="btn btn-danger btn-block m-2 mb-4 p-1" type="submit">Confirm</button>
                        <button type="button"
                                class="btn btn-outline-secondary btn-block m-2 mb-4 p-1"
                                data-bs-dismiss="modal">Cancel</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <!-- Modal: Disconnect -->

    <!-- Modal: Message -->
    <div class="modal fade"
         id="messageModal"
         tabindex="-1"
         aria-labelledby="messageModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="messageModalLabel">Send Pop-Up Message</h1>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>

                <form method="post" action="{% url 'session_details' session.uid %}">
                    {% csrf_token %}
                    <div class="modal-body">

                        {% include "diop/session_details_list.html" %}

                        <h5>Message Details</h5>

                        <!-- Information', 'Exclamation', 'Critical', 'Question' -->

                        <div class="btn-group"
                             role="group"
                             aria-label="Basic radio toggle button group">
                            <input type="radio"
                                   class="btn-check"
                                   name="btn-message-style"
                                   id="btnradio-question"
                                   value="question"
                                   autocomplete="off"
                                   checked>
                            <label class="btn btn-outline-primary" for="btnradio-question">
                                <i class="bi bi-question-circle-fill message-style-icon"></i>
                            </label>
                            <input type="radio"
                                   class="btn-check"
                                   name="btn-message-style"
                                   id="btnradio-information"
                                   value="information"
                                   autocomplete="off">
                            <label class="btn btn-outline-primary" for="btnradio-information">
                                <i class="bi bi-info-circle-fill message-style-icon"></i>
                            </label>
                            <input type="radio"
                                   class="btn-check"
                                   name="btn-message-style"
                                   id="btnradio-exclamation"
                                   value="exclamation"
                                   autocomplete="off">
                            <label class="btn btn-outline-primary" for="btnradio-exclamation">
                                <i class="bi bi-exclamation-triangle-fill message-style-icon text-warning"></i>
                            </label>
                            <input type="radio"
                                   class="btn-check"
                                   name="btn-message-style"
                                   id="btnradio-critical"
                                   value="critical"
                                   autocomplete="off">
                            <label class="btn btn-outline-primary" for="btnradio-critical">
                                <i class="bi bi-x-circle-fill message-style-icon text-danger"></i>
                            </label>
                        </div>

                        <input type="hidden" name="action" value="message">
                        <input type="hidden" name="session.uid" value="{{ session.uid }}">
                        <div class="form-group my-2">
                            <input name="msg-title"
                                   type="text"
                                   class="form-control"
                                   id="msg-title"
                                   placeholder="Title / Subject">
                        </div>
                        <div class="form-group">
                            <textarea name="msg-body"
                                      class="form-control"
                                      id="msg-body"
                                      placeholder="Message content"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-outline-secondary btn-block m-2 mb-4 p-1"
                                data-bs-dismiss="modal">Cancel</button>
                        <button class=" btn btn-primary btn-block m-2 mb-4 p-1" type="submit">Send</button>
                    </div>
                </form>

            </div>
        </div>

    </div>
    <!-- Modal: Message -->


    <h2>Session Details</h2>

    <table class="table">
        <thead>
            <th>UID</th>
            <th>Machine</th>
            <th>User</th>
            <th>Session Start</th>
            <th>Current State</th>
            <th>Last Change</th>
        </thead>
        <tr>
            <td>{{ session.uid }}</td>
            <td>{{ session.machine }}</td>
            <td>{{ session.user }}</td>
            <td>
                {{ session.t_start | naturaltime }}
                ({{ session.t_start }})
            </td>
            <td>{{ session.cur_state }}</td>
            <td>
                {{ session_properties.last.t_change | naturaltime }}
                ({{ session_properties.last.t_change }})
            </td>
        </tr>
    </table>

    <div class="my-5"></div>

    <h3>Session History</h3>

    <table class="table table-striped table-sm">
        <thead>
            <th>Change</th>
            <th>State</th>
            <th>Client Address</th>
            <th>Client Name</th>
            <th>Client Version</th>
        </thead>
        {% for history in session_properties %}
            <tr>
                <td>{{ history.t_change }} ({{ history.t_change | naturaltime }})</td>
                <td>{{ history.state }}</td>
                <td>{{ history.client_address }}</td>
                <td>{{ history.client_name }}</td>
                <td>{{ history.client_version }}</td>
            </tr>
        {% endfor %}
    </table>

    {% if session_notifications %}

        <div class="my-5"></div>

        <h4>Session Notifications</h4>

        <table class="table table-striped table-sm">
            <thead>
                <th>Created</th>
                <th>Sent</th>
                <th>Method</th>
                <th>Subject</th>
                <th>Body</th>
            </thead>
            {% for notification in session_notifications %}
                <tr>
                    <td>{{ notification.t_created | naturaltime }}</td>
                    {% if not notification.t_sent %}
                        <td>
                            <i>Never</i>
                        </td>
                    {% else %}
                        <td>{{ notification.t_sent | naturaltime }}</td>
                    {% endif %}
                    <td>{{ notification.method }}</td>
                    <td>{{ notification.subject }}</td>
                    <td>
                        <span class="d-inline-block text-truncate" style="max-width: 400px;">
                        {{ notification.body }}</span>
                    </td>
                </tr>
            {% endfor %}
        </table>

    {% endif %}

    <div class="my-5"></div>

    <h5>Actions</h5>

    <div>
        <!-- trigger modal termination confirmation -->
        <button class="btn btn-outline-danger btn-block p-1"
                data-bs-toggle="modal"
                data-bs-target="#terminateModal">🚫 Terminate</button>

        {% if not session_properties.last.state == "disconnected" %}

            <!-- trigger modal disconnect confirmation -->
            <button class="btn btn-outline-warning btn-block p-1"
                    data-bs-toggle="modal"
                    data-bs-target="#disconnectModal">🔌 Disconnect</button>

        {% else %}

            <!-- trigger modal disconnect confirmation -->
            <button class="btn btn-outline-secondary btn-block p-1"
                    data-bs-toggle="modal"
                    data-bs-target="#disconnectModal"
                    disabled>🔌 Disconnect</button>

        {% endif %}

        <!-- trigger modal message dialog -->
        <button class="btn btn-outline-primary btn-block p-1"
                data-bs-toggle="modal"
                data-bs-target="#messageModal">🪧 Send Message</button>

        <a href="{% url 'session_list' %}">
            <button class="btn btn-outline-secondary btn-block mx-4 p-1" type="submit">
                🔙 Back
            </button>
        </a>
    </div>

    <div class="my-5"></div>

{% endblock content %}
