{% extends "daisy/base.html" %}

{% load humanize %}
{% load humanize_short %}

{% block title %}
    <title>Session {{ session.uid }} - {{ request.site.name }}</title>
{% endblock title %}

{% block content-header %}
    <h1 class="lg:text-2xl">
        Session {{ session.uid }}
        {% if user.is_staff %}
            <a href="{% url 'admin:diop_session_change' session.uid %}"
               class="ml-2 inline-block"
               title="Edit Session in Admin Interface">
                <svg data-src="https://unpkg.com/heroicons/20/solid/arrow-top-right-on-square.svg"
                     class="h-6 w-6">
                </svg>
            </a>
        {% endif %}
    </h1>
{% endblock content-header %}


{% block content %}

    <!-- card session overview -->
    {% if user.is_staff %}
        <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-5">
    {% else %}
        <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-7">
    {% endif %}
        <div class="card-body overflow-x-auto">
            <h1 class="card-title">
                Overview
                <svg data-src="https://unpkg.com/heroicons/20/solid/rectangle-stack.svg"
                     class="h-6 w-6">
                </svg>
            </h1>

            <div class="stats stats-vertical bg-base-200 shadow">
                <div class="stat">
                    <div class="stat-title">User</div>
                    <div class="stat-value">
                        {{ session.user.fullname }}
                        <span class="badge badge-sm badge-outline badge-accent ml-2 mb-1 font-mono">{{ session.user.username }}</span>
                    </div>
                    <div class="stat-desc">{{ session.user.email }}</div>
                    <div class="stat-figure indicator">
                        {% if user.is_staff %}
                            <span class="indicator-item">
                                <svg data-src="https://unpkg.com/heroicons/20/solid/arrow-top-right-on-square.svg"
                                     class="h-4 w-4">
                                </svg>
                            </span>
                            <a href="{% url 'admin:diop_user_change' session.user.username %}"
                               title="Edit User in Admin Interface">
                                <svg data-src="https://unpkg.com/heroicons/20/solid/user.svg"
                                     class="h-8 w-8">
                                </svg>
                            </a>
                        {% else %}
                            <svg data-src="https://unpkg.com/heroicons/20/solid/user.svg"
                                 class="h-8 w-8">
                            </svg>
                        {% endif %}
                    </div>
                </div>

                <div class="stat">
                    <div class="stat-title">Machine</div>
                    <div class="stat-value">{{ session.machine }}</div>
                    <div class="stat-desc">{{ session.machine.fqdn }}</div>
                    <div class="stat-figure">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/computer-desktop.svg"
                             class="h-8 w-8">
                        </svg>
                    </div>
                </div>

                <div class="stat">
                    <div class="stat-title">State</div>
                    <div class="stat-value">
                        <span class="badge badge-lg badge-soft my-1">
                            {% if session.cur_state == "disconnected" %}
                                <div aria-label="status" class="status status-success"></div>
                                <div aria-label="status" class="status status-warning"></div>
                                Disconnected
                            {% elif session.cur_state == "active" %}
                                <div aria-label="status" class="status status-success"></div>
                                <div aria-label="status" class="status status-success"></div>
                                Active
                            {% else %}
                                <div aria-label="status" class="status status-error"></div>
                                <div aria-label="status" class="status status-error"></div>
                                Finished
                            {% endif %}
                        </span>

                    </div>
                    <div class="stat-desc tooltip"
                         data-tip="{{ session_properties.last.t_change }}">
                        {{ session_properties.last.t_change | naturaltime }}
                    </div>
                    <div class="stat-figure">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/play-pause.svg"
                             class="h-8 w-8">
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /card session overview -->

    <!-- card session details -->
    {% if user.is_staff %}
        <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-4">
    {% else %}
        <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-5">
    {% endif %}
        <div class="card-body overflow-x-auto">
            <h1 class="card-title">
                Details
                <svg data-src="https://unpkg.com/heroicons/20/solid/clipboard-document-list.svg"
                     class="h-6 w-6">
                </svg>
            </h1>
            <div class="stats stats-vertical bg-base-200 shadow">

                <!-- stat "session age" -->
                <div class="stat">
                    <div class="stat-figure">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/calendar-date-range.svg"
                             class="h-8 w-8">
                        </svg>
                    </div>
                    <div class="stat-title">Session Age</div>
                    <div class="stat-value tooltip" data-tip="{{ session.t_start }}">
                        {{ session.t_start | naturaltime | cut:" ago" }}
                    </div>
                </div>
                <!-- /stat "session age" -->

                <!-- stat "total fees" -->
                <div class="stat">
                    <div class="stat-figure text-info">
                        {% if session.cur_state != "ended" %}
                            <div class="status status-info animate-bounce inline-block mr-2"></div>
                        {% endif %}
                        <svg data-src="https://unpkg.com/heroicons/20/solid/credit-card.svg"
                             class="h-8 w-8 inline-block">
                        </svg>
                    </div>
                    <div class="stat-title">
                        Total Fees
                        {% if session.cur_state != "ended" %}
                            <span class="badge badge-xs badge-soft ml-2 mb-1 tooltip tooltip-info">
                                <div class="tooltip-content">
                                    Accumulated fees until now,
                                    <br>
                                    session is still running!
                                </div>
                                <div aria-label="status" class="status status-success"></div>
                            Running</span>
                        {% else %}
                            <span class="badge badge-xs badge-soft ml-2 mb-1 tooltip tooltip-info">
                                <div class="tooltip-content">
                                    Session has ended,
                                    <br>
                                    amount is final.
                                </div>
                                <div aria-label="status" class="status status-info"></div>
                            Final</span>
                        {% endif %}
                    </div>
                    <div class="stat-value text-info">CHF {{ session.current_fees | floatformat:2 }}</div>
                </div>
                <!-- /stat "total fees" -->

                <!-- stat "fees since disconnect" -->
                {% if session.cur_state == "disconnected" %}
                    <div class="stat">
                        <div class="stat-figure text-warning">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/credit-card.svg"
                                 class="h-8 w-8">
                            </svg>
                        </div>
                        <div class="stat-title">Since Disconnect</div>
                        <div class="stat-value text-warning">
                            CHF {{ session.fees_since_disconnect | floatformat:2 }}
                        </div>
                    </div>
                {% elif session.cur_state == "ended" and session.last_running_state == "disconnected" %}
                    <div class="stat tooltip">
                        <div class="tooltip-content">
                            Fees accumulated by <b>not properly finishing</b>
                            <br>
                            the session but letting it run <b>disconnected</b>
                            <br>
                            until being terminated automatically.
                        </div>
                        <div class="stat-figure text-secondary">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/credit-card.svg"
                                 class="h-8 w-8">
                            </svg>
                        </div>
                        <div class="stat-title">
                            Orphaned Costs
                            <span class="badge badge-xs badge-secondary ml-2 mb-1">
                                <div aria-label="status" class="status status-warning"></div>
                            Stale</span>
                        </div>
                        <div class="stat-value text-secondary">
                            CHF {{ session.fees_since_disconnect | floatformat:2 }}
                        </div>
                    </div>
                {% endif %}
                <!-- /stat "fees since disconnect" -->

            </div>
        </div>
    </section>
    <!-- /card session details -->

    <!-- card actions -->
    {% if user.is_staff %}
        <section class="card bg-base-300 col-span-12 shadow-xs xl:col-span-3">
            <form class="card-body" action="">
                <h1 class="card-title">
                    Actions
                    <svg data-src="https://unpkg.com/heroicons/20/solid/cursor-arrow-ripple.svg"
                         class="h-6 w-6">
                    </svg>
                </h1>

                <fieldset class="fieldset">
                    <div class="flex items-end py-4">
                        <button type="button"
                                class="btn btn-secondary btn-soft grow"
                                onclick="terminate_modal.showModal()">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/power.svg"
                                 class="h-6 w-6">
                            </svg>
                            Terminate
                        </button>
                    </div>
                    <div class="flex items-end py-4">
                        <button type="button"
                                class="btn btn-warning btn-soft grow"
                                onclick="disconnect_modal.showModal()">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/link-slash.svg"
                                 class="h-6 w-6">
                            </svg>
                            Disconnect
                        </button>
                    </div>
                    <div class="flex items-end py-4">
                        <button type="button"
                                class="btn btn-info btn-soft grow"
                                onclick="message_modal.showModal()">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/megaphone.svg"
                                 class="h-6 w-6">
                            </svg>
                            Send Message
                        </button>
                    </div>
                </fieldset>
            </form>
        </section>
    {% endif %}
    <!-- /card actions -->

    <!-- card state history -->
    <section class="card bg-base-100 col-span-12 overflow-hidden shadow-xs xl:col-span-12">
        <div class="card-body overflow-x-auto">
            <h1 class="card-title">
                State History
                <svg data-src="https://unpkg.com/heroicons/20/solid/swatch.svg"
                     class="h-6 w-6">
                </svg>
                {% if user.is_staff %}
                    <a href="{% url 'admin:diop_sessionproperties_changelist' %}?session__uid__exact={{ session.uid }}"
                       class="ml-2"
                       title="View Session Properties list in Admin Interface">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/arrow-top-right-on-square.svg"
                             class="h-6 w-6">
                        </svg>
                    </a>
                {% endif %}


            </h1>

            <table class="table-zebra table">
                <thead>
                    <th>Change</th>
                    <th>State</th>
                    <th>Client Address</th>
                    <th>Client Name</th>
                    <th>Client Version</th>
                </thead>

                <tbody>
                    {% for history in session_properties %}
                        <tr>
                            <td>{{ history.t_change }} ({{ history.t_change | naturaltime_short }})</td>
                            <td>{{ history.state }}</td>
                            <td>{{ history.client_address }}</td>
                            <td>{{ history.client_name }}</td>
                            <td>{{ history.client_version }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    <!-- /card state history -->


    {% if session_notifications %}
        <section class="card bg-base-100 col-span-12 overflow-hidden shadow-xs xl:col-span-12">
            <div class="card-body overflow-x-auto">
                <h1 class="card-title">
                    Notifications
                    <svg data-src="https://unpkg.com/heroicons/20/solid/chat-bubble-left-ellipsis.svg"
                         class="h-6 w-6">
                    </svg>
                </h1>

                <table class="table-zebra table">
                    <thead>
                        <th>Created</th>
                        <th>Sent</th>
                        <th>Method</th>
                        <th>Subject</th>
                        <th>Body</th>
                    </thead>

                    <tbody>
                        {% for notification in session_notifications %}
                            <tr>
                                <td>{{ notification.t_created | naturaltime_short }}</td>
                                {% if not notification.t_sent %}
                                    <td>
                                        <i>Never</i>
                                    </td>
                                {% else %}
                                    <td>{{ notification.t_sent | naturaltime_short }}</td>
                                {% endif %}
                                <td>{{ notification.method }}</td>
                                <td>{{ notification.subject }}</td>
                                <td>
                                    {% if notification.body|length >= 50 %}
                                        <div class="collapse collapse-arrow">
                                            <input type="checkbox" />
                                            <div class="collapse-title font-semibold">
                                                {{ notification.body | truncatechars:50 }}
                                            </div>
                                            <div class="collapse-content text-sm">{{ notification.body }}</div>
                                        </div>
                                    {% else %}
                                        {% comment %} "collapse-title" as a hack for consistent styling: {% endcomment %}
                                        <div class="collapse-title font-semibold">{{ notification.body }}</div>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    {% endif %}

    <!-- modal terminate session -->
    <dialog id="terminate_modal" class="modal">
        <div class="modal-box">

            <section class="card">
                <div class="card-body">
                    <div role="alert" class="alert alert-warning card-title">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/viewfinder-circle.svg"
                             class="h-6 w-6">
                        </svg>
                        Terminate Session ?
                    </div>
                </div>

                {% include "daisy/status/card_session_details.html" %}

                <form method="post"
                      action="{% url 'daisy_session_details' session.uid %}">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="terminate">
                    <input type="hidden" name="session.uid" value="{{ session.uid }}">
                    <div class="flex w-full items-center gap-2 py-2">
                        <button class="btn btn-secondary btn-outline min-w-0 grow"
                                type="submit">
                            <svg data-src="https://unpkg.com/heroicons/20/solid/power.svg"
                                 class="h-6 w-6">
                            </svg>
                            Terminate
                        </button>
                        <button type="button"
                                class="btn btn-outline shrink-0"
                                onclick="terminate_modal.close()">Cancel</button>
                    </div>
                </form>

            </section>
        </div>
        <!-- the "modal-backdrop" will close the dialog when clicked outside -->
        <form method="dialog" class="modal-backdrop">
            <button type="submit">close</button>
        </form>
    </dialog>
    <!-- /modal terminate session -->

    <!-- modal disconnect session -->
    <dialog id="disconnect_modal" class="modal">
        <div class="modal-box">

            <section class="card">
                <div class="card-body">
                    <div role="alert" class="alert alert-warning card-title">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/viewfinder-circle.svg"
                             class="h-6 w-6">
                        </svg>Disconnect Session ?
                    </div>

                    {% include "daisy/status/card_session_details.html" %}

                    <form method="post"
                          action="{% url 'daisy_session_details' session.uid %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="disconnect">
                        <input type="hidden"
                               name="session.uid"
                               value="{{ session.uid }}">
                        <div class="flex w-full items-center gap-2 py-2">
                            <button class="btn btn-secondary btn-outline min-w-0 grow"
                                    type="submit">
                                <svg data-src="https://unpkg.com/heroicons/20/solid/link-slash.svg"
                                     class="h-6 w-6">
                                </svg>
                                Disconnect
                            </button>
                            <button type="button"
                                    class="btn btn-outline shrink-0"
                                    onclick="disconnect_modal.close()">Cancel</button>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <!-- the "modal-backdrop" will close the dialog when clicked outside -->
        <form method="dialog" class="modal-backdrop">
            <button type="submit">close</button>
        </form>
    </dialog>
    <!-- /modal disconnect session -->

    <!-- modal send message -->
    <dialog id="message_modal" class="modal">
        <div class="modal-box">

            <section class="card">
                <div class="card-body">
                    <div role="alert" class="alert alert-info card-title">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/pencil-square.svg"
                             class="h-6 w-6">
                        </svg>Send Message
                    </div>

                    {% include "daisy/status/card_session_details.html" %}

                    <form method="post"
                          action="{% url 'daisy_session_details' session.uid %}">

                        {% csrf_token %}
                        <input type="hidden" name="action" value="message">
                        <input type="hidden"
                               name="session.uid"
                               value="{{ session.uid }}">

                        <fieldset class="fieldset w-full">

                            <div class="join w-full">
                                <input class="join-item btn btn-primary btn-soft flex-1"
                                       type="radio"
                                       name="options"
                                       aria-label="Question" />
                                <input class="join-item btn btn-accent btn-soft flex-1"
                                       type="radio"
                                       name="options"
                                       aria-label="Info" />
                                <input class="join-item btn btn-warning btn-soft flex-1"
                                       type="radio"
                                       name="options"
                                       aria-label="Warning" />
                                <input class="join-item btn btn-secondary btn-soft flex-1"
                                       type="radio"
                                       name="options"
                                       aria-label="Alert" />
                            </div>
                            <input name="msg-title"
                                   type="text"
                                   id="msg-title"
                                   class="input input-info input-lg w-full"
                                   placeholder="Title" />
                            <textarea name="msg-body"
                                      id="msg-body"
                                      class="textarea textarea-info textarea-lg h-24 w-full"
                                      placeholder="Message"></textarea>
                        </fieldset>
                        <div class="flex w-full items-center gap-2 py-2">
                            <button class="btn btn-info btn-outline min-w-0 grow"
                                    type="submit">
                                <svg data-src="https://unpkg.com/heroicons/20/solid/chat-bubble-left-right.svg"
                                     class="h-6 w-6">
                                </svg>
                                Send
                            </button>
                            <button type="button"
                                    class="btn btn-outline shrink-0"
                                    onclick="message_modal.close()">Cancel</button>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <!-- the "modal-backdrop" will close the dialog when clicked outside -->
        <form method="dialog" class="modal-backdrop">
            <button type="submit">close</button>
        </form>
    </dialog>
    <!-- /modal send message -->


{% endblock content %}