{% extends 'secrets/secret_detail.html' %}
{% load static %}
{% load i18n %}

{% block secret_content %}
    <div class="input-group input-group-lg">
        <input type="text" id="password-field" class="form-control" value="{{ placeholder }}"
               autocomplete="off" disabled>
        <div class="vr mx-1"></div>
        <button class="btn btn-light" id="copy-password" type="button"
                data-bs-toggle="tooltip"
                data-bs-placement="top" title="{% trans "Copy to clipboard" %}">
            <i class="fa fa-clipboard fa-fw"></i>
        </button>
        <button id="revealButton" class="btn btn-light" type="button"
                data-bs-toggle="tooltip"
                data-bs-placement="top" title="{% trans "Reveal as plain text" %}"
                onclick="getSecret(reveal, shouldShowModal)">
            <i class="fa fa-magic fa-fw"></i>
        </button>
        <button class="btn btn-light" type="button" data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="{% trans "Show in large type" %}" onclick="getSecret(largeType, shouldShowModal);">
            <i class="fa fa-font fa-fw"></i>
        </button>
    </div>
    <div class="modal fade" id="changeSecretModal" tabindex="-1" aria-labelledby="changeSecretModalLabel"
         aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="changeSecretModalLabel">{% translate "Secret needs changing" %}</h5>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning text-center">
                        <div class="d-flex flex-column gap-2 mb-3">
                            <span>{% translate "This secret must be changed for security reasons." %}</span>
                            <span><b>{% translate "Please do so now." %}</b></span>
                            <span>{% translate "You can continue after 5 seconds." %}</span>
                        </div>
                        <div class="progress mb-3 mx-5" role="progressbar">
                            <div class="progress-bar bg-accent" id="changeSecretProgressBar"></div>
                        </div>
                        <button id="changeSecretModalContinueButton" class="btn btn-outline-accent"
                                onclick="okButtonHandler()"
                                style="display: none">
                            {% translate "Continue" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block secret_attributes %}
    {% if secret.url or secret.username or secret.description %}
        <hr>
        <div class="row mb-3 table-responsive">
            <table class="align-middle justify-content-center secret-attributes">
                {% if secret.url %}
                    <tr>
                        <td>{% trans "URL" %}</td>
                        <td>
                            <a id="secret-url" href="{{ secret.url }}">{{ secret.url }}</a>
                            <button class="btn btn-light btn-sm" id="copy-url"
                                    data-clipboard-target="#secret-url"><i
                                    class="fa fa-clipboard"></i>
                            </button>
                        </td>
                    </tr>
                {% endif %}
                {% if secret.username %}
                    <tr>
                        <td>{% trans "Username" %}</td>
                        <td>
                            <span id="secret-username">{{ secret.username }}</span>
                            <button class="btn btn-light btn-sm" id="copy-username"
                                    data-clipboard-target="#secret-username"><i
                                    class="fa fa-clipboard"></i>
                            </button>
                        </td>
                    </tr>
                {% endif %}
                {% if secret.description %}
                    <tr>
                        <td>{% trans "Description" %}</td>
                        <td>{{ secret.description|linebreaksbr|urlize }}</td>
                    </tr>
                {% endif %}
            </table>
        </div>
    {% endif %}
{% endblock %}

{% block additionalJS %}
    <script>
        const largeTypeElement = document.querySelector('.large-type')
        largeTypeElement.addEventListener('mousedown', () => {
            largeTypeElement.classList.add('invisible')
            largeTypeElement.innerHTML = ''
        })

        function largeType(password) {
            largeTypeElement.classList.remove('invisible')
            largeTypeElement.innerHTML = `<div>${password}</div>`

            // TODO: Replace bigtext with something non-jquery
            $('.large-type').bigtext();
        }
    </script>
    <script>
        setUpAdditionalClipboards()
        if (shouldShowModal) {
            document.getElementById('copy-password').setAttribute('onclick', 'showModal()');
        } else {
            setUpPasswordClipboard();
        }
    </script>
{% endblock %}
