#{include file="../Header.html"}

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
  <!--begin::Toolbar-->
  #{include file="../Toolbar.html"}
  <!--end::Toolbar-->
  <!--begin::Post-->
  <div class="post d-flex flex-column-fluid" id="kt_post">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl md-settings">
      <!--begin::Basic info-->
      <div class="card mb-5 mb-xl-10">
        <!--begin::Content-->
        <div id="kt_account_profile_details" class="collapse show">
          <!--begin::Form-->
          <form id="data-form" method="post" class="form">
            <!--begin::Card body-->
            <div class="card-body p-9">
              <!--begin::Input group-->
              <div class="row mb-6">
                <!--begin::Label-->
                <label class="col-lg-4 col-form-label fw-bold fs-6">#{t("头像")}</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8">
                  <!--begin::Image input-->
                  <div class="image-input image-input-outline w-125px h-125px admin-mobile-image-input admin-mobile-image-input--avatar" data-kt-image-input="true"
                       style="background-image: url(/assets/admin/images/setting/blank.png)">
                    <!--begin::Preview existing logo-->
                    <div class="image-input-wrapper w-125px h-125px"
                         style="background-image: url('#{if $user.avatar}#{$user.avatar|escape:'html'}#{else}/favicon.ico#{/if}')"></div>
                    <!--end::Preview existing logo-->
                    <!--begin::Label-->
                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                           data-kt-image-input-action="change" data-bs-toggle="tooltip"
                           title="#{t('更换头像')}" aria-label="#{t('更换头像')}">
                      <i class="fa-duotone fa-regular fa-pen"></i>
                      <!--begin::Inputs-->
                      <input type="file" class="upload-logo"
                             accept=".png, .jpg, .jpeg, .ico"/>
                      <input type="hidden" name="avatar" value="#{$user.avatar|escape:'html'}"/>
                      <!--end::Inputs-->
                    </label>
                    <!--end::Label-->
                    <!--begin::Cancel-->
                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                          data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                          title="#{t('取消更换头像')}" aria-label="#{t('取消更换头像')}">
																<i class="fa-duotone fa-regular fa-xmark"></i>
															</span>
                    <!--end::Cancel-->
                  </div>
                  <!--end::Image input-->
                  <!--begin::Hint-->
                  <div class="form-text">#{t("支持文件格式: png, jpg, jpeg, ico.")}</div>
                  <!--end::Hint-->
                </div>
                <!--end::Col-->
              </div>
              <!--end::Input group-->

              <!--begin::Input group-->
              <div class="row mb-6">
                <!--begin::Label-->
                <label class="col-lg-4 col-form-label required fw-bold fs-6">#{t("昵称")}</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8 fv-row">
                  <input type="text" name="nickname"
                         class="form-control form-control-lg form-control-solid"
                         autocomplete="nickname" maxlength="32"
                         placeholder="#{t('昵称')}" value="#{$user.nickname|escape:'html'}"/>
                </div>
                <!--end::Col-->
              </div>
              <!--end::Input group-->

              <!--begin::Input group-->
              <div class="row mb-6">
                <!--begin::Label-->
                <label class="col-lg-4 col-form-label  fw-bold fs-6">#{t("旧密码")}</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8 fv-row">
                  <input type="password" name="old_password"
                         class="form-control form-control-lg form-control-solid"
                         placeholder="#{t('不修改请留空')}" value=""/>
                </div>
                <!--end::Col-->
              </div>
              <!--end::Input group-->


              <!--begin::Input group-->
              <div class="row mb-6">
                <!--begin::Label-->
                <label class="col-lg-4 col-form-label  fw-bold fs-6">#{t("新密码")}</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8 fv-row">
                  <input type="password" name="password"
                         class="form-control form-control-lg form-control-solid"
                         maxlength="256"
                         placeholder="#{t('不修改请留空')}" value=""/>
                </div>
                <!--end::Col-->
              </div>
              <!--end::Input group-->

              <!--begin::Input group-->
              <div class="row mb-6">
                <!--begin::Label-->
                <label class="col-lg-4 col-form-label  fw-bold fs-6">#{t("确认新密码")}</label>
                <!--end::Label-->
                <!--begin::Col-->
                <div class="col-lg-8 fv-row">
                  <input type="password" name="re_password"
                         class="form-control form-control-lg form-control-solid"
                         maxlength="256"
                         placeholder="#{t('不修改请留空')}" value=""/>
                </div>
                <!--end::Col-->
              </div>
              <!--end::Input group-->

              <!--begin::Input group 谷歌验证器-->
              <div class="row mb-6">
                <label class="col-lg-4 col-form-label fw-bold fs-6">#{t("谷歌验证器")}</label>
                <div class="col-lg-8 fv-row">
                  <span id="g2fa-status" class="text-muted me-2" role="status">#{t("正在读取绑定状态…")}</span>
                  <button type="button" id="g2fa-bind-btn" class="btn btn-sm btn-light-primary" style="display:none;"><i class="fa-duotone fa-regular fa-qrcode me-1"></i>#{t("绑定")}</button>
                  <button type="button" id="g2fa-unbind-btn" class="btn btn-sm btn-light-danger" style="display:none;"><i class="fa-duotone fa-regular fa-link-slash me-1"></i>#{t("解绑")}</button>
                  <button type="button" id="g2fa-retry-btn" class="btn btn-sm btn-light" style="display:none;"><i class="fa-duotone fa-regular fa-rotate me-1"></i>#{t("重试")}</button>
                </div>
              </div>
              <!--end::Input group 谷歌验证器-->

              <!--begin::Input group 通行密钥（跨整行；用普通标题而非浮动 col-form-label，避免 md-settings 把标签浮到内容上重叠）-->
              <!-- data-admin-mobile-action-placement=inline：本卡片内的新增/重命名/删除都是「针对某个通行密钥」的内联操作，
                   不能被手机版壳的 discoverActions 当成页面级动作抽进「更多操作」弹层（删除 title 命中 ACTION_HINT）。 -->
              <div class="row mb-6" style="grid-column: 1 / -1;">
                <div class="col-lg-12 fv-row" data-admin-mobile-action-placement="inline">
                  <style>
                    #passkey-list .pk-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--bs-gray-300);border-radius:12px;background:var(--bs-body-bg);transition:border-color .15s}
                    #passkey-list .pk-item + .pk-item{margin-top:8px}
                    #passkey-list .pk-item:hover{border-color:var(--bs-gray-400)}
                    #passkey-list .pk-item__ico{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(var(--bs-primary-rgb),.1);color:var(--bs-primary);font-size:16px}
                    #passkey-list .pk-item__main{flex:1 1 auto;min-width:0}
                    #passkey-list .pk-item__name{font-weight:600;font-size:13.5px;color:var(--bs-gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
                    #passkey-list .pk-item__meta{font-size:11.5px;color:var(--bs-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
                    #passkey-list .pk-item__ico .material-icons-outlined{font-size:20px}
                    #passkey-list .pk-item__acts{flex:0 0 auto;display:flex;gap:2px}
                    #passkey-list .pk-item__acts .btn{width:34px;height:34px;color:var(--bs-gray-500)}
                    #passkey-list .pk-item__acts .btn .material-icons-outlined{font-size:19px}
                    #passkey-list .pk-empty{padding:16px;border:1px dashed var(--bs-gray-300);border-radius:12px;text-align:center}
                    @media (max-width:767.98px){
                      #passkey-list .pk-item{padding:12px;gap:10px}
                      #passkey-list .pk-item__acts .btn{width:40px;height:40px}
                      #passkey-list .pk-item__acts .btn .material-icons-outlined{font-size:21px}
                      #passkey-list .pk-item__name{font-size:15px}
                      #passkey-list .pk-item__meta{font-size:12px}
                    }
                  </style>
                  <div class="fw-bold fs-6 mb-1">#{t("通行密钥")}</div>
                  <div class="text-muted fs-8 mb-4">#{t("Touch ID / Windows Hello / 安全密钥，免密码登录与解锁")}</div>
                  <div id="passkey-list" class="mb-3"></div>
                  <button type="button" id="passkey-add-btn" class="btn btn-sm btn-light-primary"><span class="material-icons-outlined fs-6 align-middle me-1">vpn_key</span>#{t("添加通行密钥")}</button>
                  <div id="passkey-hint" class="text-muted fs-8 mt-2" style="display:none;"></div>
                </div>
              </div>
              <!--end::Input group 通行密钥-->


            </div>
            <!--end::Card body-->
            <!--begin::Actions-->
            <div class="card-footer d-flex justify-content-center py-6 px-9">
              <button type="button" class="btn btn-light-primary save-data" style="margin-right: 20px;"><i class="fa-duotone fa-regular fa-floppy-disk"></i> #{t("确认修改")}</button>
              <a href="/admin/authentication/logout" class="btn btn-light-danger logout"><i class="fa-duotone fa-regular fa-right-from-bracket"></i> #{t("注销登录")}</a>
            </div>
            <!--end::Actions-->
          </form>
          <!--end::Form-->
        </div>
        <!--end::Content-->
      </div>
      <!--end::Basic info-->

      <!--begin::Device sessions-->
      <div class="card mb-5 mb-xl-10 md-device-sessions" aria-labelledby="md-device-sessions-title">
        <div class="card-header border-0 pt-6">
          <div class="card-title d-flex flex-column align-items-start">
            <h2 id="md-device-sessions-title" class="fw-bolder mb-1">#{t("登录设备")}</h2>
            <span class="text-muted fs-7">#{t("每台设备独立登录，可随时退出不再使用的设备")}</span>
          </div>
          <div class="card-toolbar d-flex flex-wrap gap-2" data-admin-mobile-local-actions>
            <button type="button" class="btn btn-light-danger md-session-revoke-others">
              <i class="fa-duotone fa-regular fa-right-from-bracket"></i>#{t("退出其他设备")}
            </button>
            <button type="button" class="btn btn-danger md-session-revoke-all">
              <i class="fa-duotone fa-regular fa-shield-xmark"></i>#{t("退出全部设备")}
            </button>
          </div>
        </div>
        <div class="card-body pt-3">
          <div id="md-device-session-status" class="text-muted py-6 text-center" role="status">#{t("正在读取登录设备…")}</div>
          <div id="md-device-session-list" class="md-device-session-list" data-admin-mobile-local-actions aria-live="polite"></div>
          <button type="button" class="btn btn-light-primary md-session-retry mx-auto" style="display:none;">
            <i class="fa-duotone fa-regular fa-rotate"></i>#{t("重新读取")}
          </button>
        </div>
      </div>
      <!--end::Device sessions-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::Post-->
</div>
<!--end::Content-->

#{ready("/assets/admin/controller/manage/set.js")}
#{ready("/assets/admin/controller/config/google2fa.js")}
#{ready("/assets/admin/controller/manage/passkey.js")}
#{include file="../Footer.html"}