{% extends 'layout.html' %}
{% block content %}
    <section class="container bg-light my-3">
        <h5 class="add-edit-text">{{ text }}</h5>
        <form class="form-add my-3 py-3 border rounded-3 bg-white" method="POST" novalidate>
            {{ form.hidden_tag() }}
            <fieldset class="form-group border-bottom mb-3">
                <div class="form-group mb-3">
                    {{ form.name.label(class="form-label") }}
                    {% if form.name.errors %}
                        {{ form.name(class="form-control is-invalid") }}
                        <div class="d-block invalid-feedback">
                            {% for error in form.name.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.name(class="form-control") }}
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.username.label(class="form-label") }}
                    {% if form.username.errors %}
                        <div class="d-flex align-items-center">
                            {{ form.username(class="form-control is-invalid") }}
                            <i class="bi bi-files copy-username-icon text-primary" title="Copy Username" onclick="copyToClipboard('username')"></i>
                        </div>
                        <div class="d-block invalid-feedback">
                            {% for error in form.username.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="d-flex align-items-center">
                            {{ form.username(class="form-control") }}
                            <i class="bi bi-files copy-username-icon text-primary" title="Copy Username" onclick="copyToClipboard('username')"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.password.label(class="form-label") }}
                    {% if form.password.errors %}
                        <div class="d-flex align-items-center">
                            {{ form.password(class="form-control is-invalid", type="password", id="password") }}
                            <i class="bi bi-eye text-primary" onclick="toggleVisibility('#password', '#toggleVisibility', 0)" id="toggleVisibility" title="Toggle Visibility"></i>
                            <i class="bi bi-arrow-repeat text-primary" id="generatePassword" title="Generate Password"></i>
                            <i class="bi bi-files copy-password-icon text-primary" title="Copy Password" onclick="copyToClipboard('password')"></i>
                        </div>
                        <div class="d-block invalid-feedback">
                            {% for error in form.password.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="d-flex align-items-center">
                            {{ form.password(class="form-control", type="password", id="password") }}
                            <i class="bi bi-eye text-primary" onclick="toggleVisibility('#password', '#toggleVisibility', 0)" id="toggleVisibility" title="Toggle Visibility"></i>
                            <i class="bi bi-arrow-repeat text-primary" id="generatePassword" title="Generate Password"></i>
                            <i class="bi bi-files copy-password-icon text-primary" title="Copy Password" onclick="copyToClipboard('password')"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.url.label(class="form-label") }}
                    {% if form.url.errors %}
                        <div class="d-flex align-items-center">
                            {{ form.url(class="form-control is-invalid", id="url", placeholder="ex. https://www.google.com") }}
                            <i class="bi bi-box-arrow-up-right launch-url-icon text-primary" title="Launch URL" onclick="launchURL()"></i>
                            <i class="bi bi-files copy-url-icon text-primary" title="Copy URL" onclick="copyToClipboard('url')"></i>
                        </div>
                        <div class="d-block invalid-feedback">
                            {% for error in form.url.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="d-flex align-items-center">
                            {{ form.url(class="form-control", id="url", placeholder="ex. https://www.google.com") }}
                            <i class="bi bi-box-arrow-up-right launch-url-icon text-primary" title="Launch URL" onclick="launchURL()"></i>
                            <i class="bi bi-files copy-url-icon text-primary" title="Copy URL" onclick="copyToClipboard('url')"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.notes.label(class="form-label") }}
                    {% if form.notes.errors %}
                        {{ form.notes(class="form-control is-invalid") }}
                        <div class="d-block invalid-feedback">
                            {% for error in form.notes.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.notes(class="form-control") }}
                    {% endif %}
                </div>
            </fieldset>
            <div class="form-group d-flex justify-content-between align-items-center mt-3">
                <button class="w-50 btn btn-primary me-2" type="submit">Submit</button>
                <a class="w-50 btn btn-outline-secondary" href="{{ url_for('main.index') }}">Cancel</a>
            </div>
        </form>
    </section>
{% endblock content %}