{% extends "base.html" %}
{% load humanize %}
{% load i18n %}
{% load static %}
{% block title %}{{ secret.name }}{% endblock %}
{% block content %}
    <div class="large-type invisible">
        <div class="lt-otp-countdown d-md-table-row invisible"></div>
        <div class="lt-otp d-lg-table-row invisible"></div>
        <div class="lt-password invisible"></div>
    </div>

    <div class="container-xl">
        <!-- Secret header -->
        <div class="row mb-3 justify-content-between px-0 text-break">
            <div class="col-10 h2 flex-grow-1">
                {{ secret.name }}
            </div>
            <div class="col-auto h2 d-flex gap-2 justify-content-end align-items-end">
                {% if secret.status == secret.STATUS_DELETED %}
                    <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                          title="{% trans "This secret has been deleted and is not visible to regular users." %}"
                          class="text-danger-bright"><i class="fa fa-trash"></i></span>
                    <span class="text-muted-bright">|</span>
                {% elif secret.status == secret.STATUS_NEEDS_CHANGING %}
                    <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                          title="{% trans "This secret must be changed for security reasons. Please do so now." %}"
                          class="text-danger-bright"><i class="fa fa-refresh"></i>
                        </span>
                    <span class="text-muted-bright">|</span>
                {% endif %}
                {% if readable %}
                    <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                          title="{% trans "You have access to this secret." %}" class="text-success-bright">
                            <i class="fa fa-lock-open"></i>
                        </span>
                {% else %}
                    <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                          title="{% trans "You don't have access to this secret." %}" class="text-danger-bright">
                            <i class="fa fa-lock"></i>
                        </span>
                {% endif %}
            </div>
        </div>

        <!-- Secret data -->
        <div class="row justify-content-between">
            <div class="col-lg-8 mb-3 mb-lg-0">
                <div class="card shadow">
                    <div class="card-body">
                        {% if readable %}
                            <div class="row mb-3">
                                <div class="col-12">
                                    {% block secret_content %}
                                    {% endblock %}
                                </div>
                            </div>
                        {% elif secret_deleted %}
                            <div class="alert alert-danger text-center mb-0">
                                {% trans "This secret has been deleted." %}
                            </div>
                        {% else %}
                            <div class="alert alert-danger text-center mb-0">
                                {% trans "You are not allowed to read this secret." %}
                            </div>
                        {% endif %}
                        {% block secret_attributes %}
                        {% endblock %}
                        <hr>
                        <div class="row justify-content-between">
                            <div class="btn-group btn-group-lg gap-2 px-lg-3" role="group">
                                <button class="btn btn-light {% if not shareable %}disabled{% endif %}"
                                        data-bs-toggle="modal" data-bs-target="#share-secret-modal">
                                    <i class="fa fa-share-alt fa-fw text-secondary"></i>
                                    {% trans "Share" %}
                                </button>
                                <div class="vr"></div>
                                <a class="btn btn-light {% if not readable %}disabled{% endif %}"
                                   href="{% url "secrets.secret-edit" secret.hashid %}">
                                    <i class="fa fa-pencil fa-fw text-info-emphasis"></i> {% trans "Edit" %}
                                </a>
                                <div class="vr"></div>
                                {% if secret.status == secret.STATUS_DELETED %}
                                    <a class="btn btn-light {% if not shareable %}disabled{% endif %}"
                                       href="{% url "secrets.secret-restore" secret.hashid %}"
                                       title="{% trans "Undelete this secret" %}">
                                        <i class="fa fa-undo fa-fw text-info-emphasis"></i> {% trans "Restore" %}
                                    </a>
                                {% else %}
                                    <a class="btn btn-light {% if not readable %}disabled{% endif %}"
                                       href="{% url "secrets.secret-delete" secret.hashid %}">
                                        <i class="fa fa-trash fa-fw text-danger-emphasis"></i> {% trans "Delete" %}
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4" hx-get="{% url 'secrets.secret-metadata' hashid=secret.hashid %}"
                 hx-trigger="load, refreshMetadata from:body"></div>
        </div>
    </div>
    {% if shareable %}
        <div class="modal fade" id="share-secret-modal" tabindex="-1" aria-labelledby="share-secret-modal-label"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl modal-fullscreen-md-down">
                <div class="modal-content" hx-get="{% url "secrets.secret-share" hashid=secret.hashid %}"
                     hx-trigger="load, refreshShareData from:body">
                </div>
            </div>
        </div>
    {% endif %}
    {% if su_access %}
        {% include "secrets/detail_content/_su_confirm_modal.html" %}
    {% endif %}
    {% include 'secrets/detail_content/_js.html' %}
{% endblock %}
