<script type="module"
    src="/pkg/modules/cred_update.mjs?v=((crate::https::cache_buster::get_cache_buster_key()))"
    async></script>
<script
    src="/pkg/external/base64.js?v=((crate::https::cache_buster::get_cache_buster_key()))"
    async></script>

<div class="row g-3" id="credentialUpdateDynamicSection"
    hx-on::before-swap="stillSwapFailureResponse(event)">
    <form class="needs-validation mb-5 pb-5" novalidate>
        (% match ext_cred_portal %)
        (% when CUExtPortal::None %)
        (% when CUExtPortal::Hidden %)
        <hr class="my-4" />
        <p>This account is externally managed. Some features may not be
            available.</p>
        (% when CUExtPortal::Some(url) %)
        <hr class="my-4" />
        <p>This account is externally managed. Some features may not be
            available.</p>
        <a href="(( url ))">Visit the external account portal</a>
        (% endmatch %)

        (% if warnings.len() > 0 %)
        <hr class="my-4">
        (% for warning in warnings %)
        (% let is_danger = [CURegWarning::WebauthnAttestationUnsatisfiable,
        CURegWarning::Unsatisfiable].contains(warning) %)
        (% if is_danger %)
        <div class='alert alert-danger' role="alert">
            (% else %)
            <div class='alert alert-warning' role="alert">
                (% endif %)

                (% match warning %)
                (% when CURegWarning::MfaRequired %)
                Multi-Factor Authentication is required for your account. Either
                add TOTP or remove your password in favour of passkeys to
                submit.
                (% when CURegWarning::PasskeyRequired %)
                Passkeys are required for your account.
                (% when CURegWarning::AttestedPasskeyRequired %)
                Attested Passkeys are required for your account.
                (% when CURegWarning::AttestedResidentKeyRequired %)
                Attested Resident Keys are required for your account.
                (% when CURegWarning::WebauthnAttestationUnsatisfiable %)
                A webauthn attestation policy conflict has occurred and you will
                not be able to save your credentials
                (% when CURegWarning::Unsatisfiable %)
                An account policy conflict has occurred and you will not be able
                to save your credentials
                (% endmatch %)

                (% if is_danger %)
                <br><br>
                <b>Contact support IMMEDIATELY.</b>
                (% endif %)
            </div>
            (% endfor %)
            (% endif %)

            <!-- Attested Passkeys -->
            (% match attested_passkeys_state %)
            (% when CUCredState::Modifiable %)
            (% include "credentials_update_attested_passkeys.html" %)
            <button type="button" class="btn btn-primary"
                hx-post="/ui/reset/add_passkey" hx-vals='{"class": "Attested"}'
                hx-target="#credentialUpdateDynamicSection">
                Add Attested Passkey
            </button>
            (% when CUCredState::DeleteOnly %)
            (% if attested_passkeys.len() > 0 %)
            (% include "credentials_update_attested_passkeys.html" %)
            (% endif %)
            (% when CUCredState::AccessDeny %)
            (% when CUCredState::PolicyDeny %)
            (% endmatch %)

            <!-- Passkeys -->
            (% match passkeys_state %)
            (% when CUCredState::Modifiable %)
            (% include "credentials_update_passkeys.html" %)
            <!-- Here we are modifiable so we can render the button to add passkeys  -->
            <div class="btn-group">
                <button type="button" class="btn btn-primary"
                    hx-post="/ui/reset/add_passkey"
                    hx-vals='{"class": "Any"}'
                    hx-target="#credentialUpdateDynamicSection">
                    Add Passkey
                </button>
                <button type="button"
                    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" hx-post="/ui/api/cancel_mfareg"
                            hx-swap="none">Cancel MFA Registration
                            session</a></li>
                </ul>
            </div>

            (% when CUCredState::DeleteOnly %)
            (% if passkeys.len() > 0 %)
            (% include "credentials_update_passkeys.html" %)
            (% endif %)
            (% when CUCredState::AccessDeny %)
            (% when CUCredState::PolicyDeny %)
            (% endmatch %)

            <!-- Password, totp credentials -->
            (% let primary_state = primary_state %)
            (% include "credentials_update_primary.html" %)

            <div id="cred-update-commit-bar" class="toast" role="alert"
                aria-live="assertive" aria-atomic="true">
                <div class="toast-body">
                    <span class="d-flex align-items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                            height="16" fill="currentColor"
                            class="bi bi-floppy2-fill" viewBox="0 0 16 16">
                            <path d="M12 2h-2v3h2z" />
                            <path
                                d="M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" />
                        </svg>
                        <b class="px-1">Careful</b>- save when you're done:
                    </span>
                    <div class="mt-2 pt-2 border-top">
                        <button class="btn btn-danger"
                            hx-post="/ui/api/cu_cancel"
                            hx-target="body">Cancel</button>
                        <span class="d-inline-block" tabindex="0"
                            data-bs-toggle="tooltip"
                            data-bs-title="Resolve the warnings at the top.">
                            <button
                                class="btn btn-success"
                                type="submit"
                                hx-post="/ui/api/cu_commit"
                                hx-boost="false"
                                (% if !warnings.is_empty() %)disabled(% endif
                                %)>Save Changes</button>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>