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

{% block secret_content %}
    <div class="input-group input-group-lg">
        <div id="password-field" class="input-group-text form-control overflow-auto">{{ placeholder }}</div>
        <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>
{% if secret_revision.otp_key_set %}
        <div class="row mt-4">
            <label for="otp-field" class="form-label mt-2 fs-4">One Time Password</label>

            <div class="input-group input-group-lg">
                <div class="d-flex align-items-center border bg-otp rounded-start flex-grow-1 px-2">
                    <span id="otp-field" class="m-auto fs-5"></span>
                    <div id="countdown" class="bg-otp">
                        <div id="countdown-number"></div>
                        <svg>
                            <circle r="14" cx="20" cy="20" id="progress-circle"></circle>
                        </svg>
                    </div>
                </div>
                <div class="vr mx-1"></div>
                <button class="btn btn-light" id="copy-otp" 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 class="btn btn-light" type="button" data-bs-toggle="tooltip"
                        data-bs-placement="top" id="large-type-button-otp"
                        title="{% trans "Show in large type" %}">
                    <i class="fa fa-font fa-fw"></i>
                </button>
            </div>
        </div>
    {% endif %}
    <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 largeTypeButtonOtp = document.getElementById('large-type-button-otp');
        const largeTypeElement = document.querySelector('.large-type');
        const largeTypePassword = document.querySelector('.lt-password');
        const largeTypeOTPCountdown = document.querySelector('.lt-otp-countdown');
        const largeTypeOTP = document.querySelector('.lt-otp');

        if ({{ secret_revision.otp_key_set|lower }}) {
            largeTypeButtonOtp.addEventListener('click', () => {
                largeType(document.getElementById('otp-field').innerHTML, 'otp',
                    document.getElementById('countdown').outerHTML);
            });
        }
        largeTypeElement.addEventListener('mousedown', () => {
            [largeTypeElement, largeTypePassword, largeTypeOTPCountdown, largeTypeOTP].forEach(el => el.classList.add('invisible'));
            [largeTypePassword, largeTypeOTPCountdown, largeTypeOTP].forEach(el => el.innerHTML = '');
        })

        function largeType(data, type = "password", otpCountdownField = null) {
            if (type === "password") {
                largeTypePassword.classList.remove('invisible')
                const largeTypeHTML = teamvault.getColorfulPasswordHTML(data)
                largeTypePassword.append(...largeTypeHTML)
            } else {
                largeTypeOTPCountdown.classList.remove('invisible');
                largeTypeOTP.classList.remove('invisible');
                largeTypeOTPCountdown.innerHTML = otpCountdownField;
                largeTypeOTP.innerHTML = data.replace('mx-1', 'mx-3')
                otp.otpCountdown(
                    largeTypeOTPCountdown.children[0],
                    largeTypeOTPCountdown.children[0].children[0],
                    largeTypeOTP,
                    '{{ secret_url }}',
                    largeTypeElement
                );
            }
            largeTypeElement.classList.remove('invisible')

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