<html lang="en" class="light">
    <head>
        <link rel="stylesheet" type="text/css" href="{{ .urlBase }}/css/{{ .cssVersion }}bundle.css">
        <script>
            window.URLBase = "{{ .urlBase }}";
            window.notificationsEnabled = {{ .notifications }};
            window.ombiEnabled = {{ .ombiEnabled }};
            window.langFile = JSON.parse({{ .language }});
            window.pwrEnabled = {{ .pwrEnabled }};
            window.linkResetEnabled = {{ .linkResetEnabled }};
            window.language = "{{ .langName }}";
            window.telegramEnabled = {{ .telegramEnabled }};
            window.telegramRequired = {{ .telegramRequired }};
            window.telegramUsername = {{ .telegramUsername }};
            window.telegramURL = {{ .telegramURL }};
            window.emailEnabled = {{ .emailEnabled }};
            window.emailRequired = {{ .emailRequired }};
            window.discordEnabled = {{ .discordEnabled }};
            window.discordRequired = {{ .discordRequired }};
            window.discordServerName = "{{ .discordServerName }}";
            window.discordInviteLink = {{ .discordInviteLink }};
            window.discordSendPINMessage = "{{ .discordSendPINMessage }}";
            window.matrixEnabled = {{ .matrixEnabled }};
            window.matrixRequired = {{ .matrixRequired }};
            window.matrixUserID = "{{ .matrixUser }}";
            window.validationStrings = JSON.parse({{ .validationStrings }});
            window.referralsEnabled = {{ .referralsEnabled }};
        </script>
        {{ template "header.html" . }}
        <title>{{ .strings.myAccount }}</title>
    </head>
    <body class="max-w-full overflow-x-hidden section">
        <div id="modal-email" class="modal">
            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                <div class="content">
                    <span class="heading mb-4 my-2"></span>
                    <label class="label supra row m-1" for="modal-email-input">{{ .strings.emailAddress }}</label>
                    <div class="row">
                        <input type="email" class="col sm field ~neutral @low input" id="modal-email-input" placeholder="{{ .strings.emailAddress }}">
                    </div>
                    <button class="button ~urge @low supra full-width center lg my-2 modal-submit">{{ .strings.submit }}</button>
                </div>
                <div class="confirmation-required unfocused">
                    <span class="heading mb-4">{{ .strings.confirmationRequired }} <span class="modal-close">&times;</span></span>
                    <p class="content mb-4">{{ .strings.confirmationRequiredMessage }}</p>
                </div>
            </div>
        </div>
        {{ if .pwrEnabled }}
        <div id="modal-pwr" class="modal">
            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
                <span class="heading">{{ .strings.resetPassword }}</span>
                <p class="content my-2">
                {{ if .linkResetEnabled }}
                    {{ .strings.resetPasswordThroughLink }}
                {{ else }}
                    {{ .strings.resetPasswordThroughJellyfin }}
                {{ end }}
                </p>
                <div class="row">
                    <input type="text" class="col sm field ~neutral @low input" id="pwr-address" placeholder="username | example@example.com | user#1234 | @user:host | @username">
                </div>
                {{ if .linkResetEnabled }}
                    <span class="button ~info @low full-width center mt-4" id="pwr-submit">
                        {{ .strings.submit }}
                    </span>
                {{ else }}
                    <a class="button ~info @low full-width center mt-4" href="{{ .jfLink }}" target="_blank">{{ .strings.continue }}</a>
                {{ end }}
            </div>
        </div>
        {{ end }}
        {{ template "login-modal.html" . }}
        {{ template "account-linking.html" . }}
        <div id="notification-box"></div>
        <div class="top-4 left-4 absolute">
            <span class="dropdown" tabindex="0" id="lang-dropdown">
                <span class="button ~urge dropdown-button">
                    <i class="ri-global-line"></i>
                    <span class="ml-2 chev"></span>
                </span>
                <div class="dropdown-display">
                    <div class="card ~neutral @low">
                        <label class="switch pb-4">
                            <input type="radio" name="lang-time" id="lang-12h">
                            <span>{{ .strings.time12h }}</span>
                        </label>
                        <label class="switch pb-4">
                            <input type="radio" name="lang-time" id="lang-24h">
                            <span>{{ .strings.time24h }}</span>
                        </label>
                        <div id="lang-list"></div>
                    </div>
                </div>
            </span>
            <span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
            <span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span>
        </div>
        <div class="top-4 right-4 absolute">
            <a class="button ~info unfocused" href="/" id="admin-back-button"><i class="ri-arrow-left-fill mr-2"></i>{{ .strings.admin }}</a>
        </div>
        <div class="page-container unfocused">
            <div class="card @low dark:~d_neutral mb-4" id="card-user">
                <span class="heading mb-2"></span>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                {{ if index . "PageMessageEnabled" }}
                    {{ if .PageMessageEnabled }}
                        <div class="card @low dark:~d_neutral content" id="card-message">
                            {{ .PageMessageContent }}
                        </div>
                    {{ end }}
                {{ end }}
                <div class="card @low dark:~d_neutral flex-col" id="card-contact">
                    <span class="heading mb-2">{{ .strings.contactMethods }}</span>
                    <div class="content flex justify-between flex-col h-100"></div>
                </div>
                <div>
                    <div class="card @low dark:~d_neutral content" id="card-password">
                        <span class="heading row mb-2">{{ .strings.changePassword }}</span>
                        <div class="">
                            <div class="my-2">
                                <span class="label supra row">{{ .strings.passwordRequirementsHeader }}</span>
                                <ul>
                                    {{ range $key, $value := .requirements }}
                                        <li class="" id="requirement-{{ $key }}" min="{{ $value }}">
                                            <span class="badge lg ~positive requirement-valid"></span> <span class="content requirement-content"></span>
                                        </li>
                                    {{ end }}
                                </ul>
                            </div>
                            <div class="my-2">
                                <label class="label supra" for="user-old-password">{{ .strings.oldPassword }}</label>
                                <input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-old-password" aria-label="{{ .strings.oldPassword }}">
                                <label class="label supra" for="user-new-password">{{ .strings.newPassword }}</label>
                                <input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-new-password" aria-label="{{ .strings.newPassword }}">

                                <label class="label supra" for="user-reenter-password">{{ .strings.reEnterPassword }}</label>
                                <input type="password" class="input ~neutral @low mt-2 mb-4" placeholder="{{ .strings.password }}" id="user-reenter-new-password" aria-label="{{ .strings.reEnterPassword }}">
                                <span class="button ~info @low full-width center mt-4" id="user-password-submit">
                                    {{ .strings.changePassword }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card @low dark:~d_neutral unfocused" id="card-status">
                        <span class="heading mb-2">{{ .strings.expiry }}</span>
                        <aside class="aside ~warning user-expiry my-4"></aside>
                        <div class="user-expiry-countdown"></div>
                    </div>
                </div>
                {{ if .referralsEnabled }}
                    <div>
                        <div class="card @low dark:~d_neutral unfocused" id="card-referrals">
                            <span class="heading mb-2">{{ .strings.referrals }}</span>
                            <aside class="aside ~neutral my-4 col">{{ .strings.referralsDescription }}</aside>
                            <div class="row flex-expand">
                                <div class="user-referrals-info"></div>
                                <div class="grid my-2">
                                    <button type="button" class="user-referrals-button button ~info dark:~d_info @low" title="Copy">{{ .strings.copyReferral }}<i class="ri-file-copy-line ml-2"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                {{ end }}
            </div>
        </div>
        <script src="{{ .urlBase }}/js/user.js" type="module"></script>
    </body>
</html>

