{% extends "base.html" %}
{% load humanize %}
{% load i18n %}
{% load render_bundle from webpack_loader %}
{% 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 id="secret-detail-config"
         data-secret-url="{{ secret_url }}"
         data-placeholder="{{ placeholder }}"
         data-show-password-update-alert="{{ show_password_update_alert|lower }}"
         data-otp-enabled="{% if secret_revision %}{{ secret_revision.otp_key_set|lower }}{% else %}false{% endif %}"
         data-content-type="{{ content_type }}"
         data-su-access="{{ su_access|lower }}"
         data-hide-tooltip="{% trans 'Hide plain text' %}"
         data-reveal-tooltip="{% trans 'Reveal as plain text' %}"
         data-password-copied="{% trans 'Password has been copied to your clipboard.' %}"
         data-otp-copied="{% trans 'OTP has been copied to your clipboard.' %}"
         data-url-copied="{% trans 'URL has been copied to your clipboard.' %}"
         data-username-copied="{% trans 'Username has been copied to your clipboard.' %}"
         data-cc-code-copied="{% trans 'Code has been copied to your clipboard.' %}"
         data-cc-password-copied="{% trans 'Password has been copied to your clipboard.' %}"
         data-cc-reveal-text="{% trans 'Reveal' %}"
         data-cc-hide-text="{% trans 'Hide' %}"
         data-cc-valid-date="{% trans 'valid\nthru' %}"
         data-cc-month-year="{% trans 'MM' %}/{% trans 'YYYY' %}"
         data-cc-full-name="{% trans 'Full name' %}"
         hidden>
    </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 == SecretStatus.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 == SecretStatus.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>
                                  <a class="btn btn-light {% if not readable %}disabled{% endif %}"
                                      href="{% url "secrets.secret-revisions" secret.hashid %}">
                                      <i class="fa fa-history fa-fw text-info-emphasis"></i> {% trans "History" %}
                                  </a>
                                <div class="vr"></div>
                                {% if secret.status == SecretStatus.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 %}
{% endblock %}

{% block additionalJS %}
    {% render_bundle 'secret-detail' attrs='crossorigin="anonymous"' %}
{% endblock %}