{% 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 lg:font-light">Session {{ session.uid }}</h1>
{% endblock content-header %}


{% block content %}

    <!-- card session overview -->
    <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-5">
        <div class="card-body overflow-x-auto">
            <h1 class="card-title">
                Overview
                <svg data-src="https://unpkg.com/heroicons/20/solid/paper-clip.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 }}</div>
                    <div class="stat-desc">{{ session.user.email }}</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>

                <div class="stat">
                    <div class="stat-title">State</div>
                    <div class="stat-value">{{ session.cur_state }}</div>
                    <div class="stat-desc">{{ session_properties.last.t_change | naturaltime }}</div>
                </div>
            </div>
        </div>
    </section>
    <!-- /card session overview -->

    <!-- card details -->
    <section class="card bg-base-100 col-span-12 shadow-xs xl:col-span-4">
        <div class="card-body overflow-x-auto">
            <h1 class="card-title">
                Details
                <svg data-src="https://unpkg.com/heroicons/20/solid/credit-card.svg"
                     class="h-6 w-6">
                </svg>
            </h1>
            <div class="stats stats-vertical bg-base-200 shadow">
                <div class="stat">
                    <div class="stat-title">Session Age</div>
                    <div class="stat-value">{{ session.t_start | naturaltime | cut:" ago" }}</div>
                    <div class="stat-desc">
                        <svg data-src="https://unpkg.com/heroicons/20/solid/calendar-days.svg"
                             class="h-4 w-4 inline-block">
                        </svg>
                        {{ session.t_start }}
                    </div>

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

    <!-- card actions -->
    <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>
    <!-- /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>
            </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 %}