{% 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" %}">
            <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" %}" data-action="large-type-password">
            <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"
                                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 %}