<?php
// app/views/pages/account.php

$centerTitle = $t('account.title', 'Account');
$centerI18n = 'account.title';
$statusHidden = true;
$showQueueSummary = true;
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title data-i18n="account.page_title"><?php echo htmlspecialchars($t('account.page_title', 'scMedia / Account'), ENT_QUOTES); ?></title>
  <link rel="stylesheet" href="/assets/css/common.css">
  <link rel="stylesheet" href="/assets/css/settings.css">
  <link rel="stylesheet" href="/assets/css/account.css">
</head>
<body>
  <?php require __DIR__ . '/../partials/header.php'; ?>

  <main class="account-layout">
    <section class="card">
      <div class="pane-header">
        <h2 data-i18n="account.profile"><?php echo htmlspecialchars($t('account.profile', 'Profile'), ENT_QUOTES); ?></h2>
      </div>
      <div class="account-profile">
        <div class="avatar-block">
          <img id="accountAvatar" class="avatar-img" src="/assets/icons/scmedia.png" alt="Avatar">
          <input id="avatarFile" type="file" accept="image/*">
          <button id="btnAvatarUpload" class="btn" type="button" data-i18n="account.avatar.upload"><?php echo htmlspecialchars($t('account.avatar.upload', 'Upload'), ENT_QUOTES); ?></button>
          <div class="hint" data-i18n="account.avatar.hint"><?php echo htmlspecialchars($t('account.avatar.hint', 'Max 5MB'), ENT_QUOTES); ?></div>
        </div>
        <div class="profile-fields">
          <label>
            <div class="lbl" data-i18n="account.nickname"><?php echo htmlspecialchars($t('account.nickname', 'Nickname'), ENT_QUOTES); ?></div>
            <input id="accountNickname" type="text" placeholder="<?php echo htmlspecialchars($t('account.nickname.ph', 'Your name'), ENT_QUOTES); ?>">
          </label>
          <label>
            <div class="lbl" data-i18n="account.email"><?php echo htmlspecialchars($t('account.email', 'Email'), ENT_QUOTES); ?></div>
            <input id="accountEmail" type="email">
          </label>
          <button id="btnAccountSave" class="btn primary" type="button" data-i18n="common.save"><?php echo htmlspecialchars($t('common.save', 'Save'), ENT_QUOTES); ?></button>
        </div>
      </div>
    </section>

    <section class="card">
      <div class="pane-header">
        <h2 data-i18n="account.interface"><?php echo htmlspecialchars($t('account.interface', 'Interface'), ENT_QUOTES); ?></h2>
      </div>
      <div class="grid">
        <label>
          <div class="lbl" data-i18n="settings.language"><?php echo htmlspecialchars($t('settings.language', 'Language'), ENT_QUOTES); ?></div>
          <select id="accountLanguage">
            <option value="ru">RU</option>
            <option value="en">EN</option>
            <option value="de">DE</option>
          </select>
        </label>
        <label>
          <div class="lbl" data-i18n="account.theme"><?php echo htmlspecialchars($t('account.theme', 'Theme'), ENT_QUOTES); ?></div>
          <select id="accountTheme">
            <option value="dark" data-i18n="theme.dark"><?php echo htmlspecialchars($t('theme.dark', 'Dark'), ENT_QUOTES); ?></option>
            <option value="light" data-i18n="theme.light"><?php echo htmlspecialchars($t('theme.light', 'Light'), ENT_QUOTES); ?></option>
          </select>
        </label>
        <label>
          <div class="lbl" data-i18n="settings.ui.table_mode"><?php echo htmlspecialchars($t('settings.ui.table_mode', 'Table navigation'), ENT_QUOTES); ?></div>
          <select id="accountTableMode">
            <option value="pagination" data-i18n="settings.ui.table_mode_pages"><?php echo htmlspecialchars($t('settings.ui.table_mode_pages', 'Pages'), ENT_QUOTES); ?></option>
            <option value="infinite" data-i18n="settings.ui.table_mode_infinite"><?php echo htmlspecialchars($t('settings.ui.table_mode_infinite', 'Infinite scroll'), ENT_QUOTES); ?></option>
          </select>
        </label>
        <label>
          <div class="lbl" data-i18n="settings.ui.table_page_size"><?php echo htmlspecialchars($t('settings.ui.table_page_size', 'Rows per page'), ENT_QUOTES); ?></div>
          <input id="accountTableSize" type="number" min="5" max="500">
        </label>
      </div>
    </section>

    <section class="card">
      <div class="pane-header">
        <h2 data-i18n="account.security"><?php echo htmlspecialchars($t('account.security', 'Security'), ENT_QUOTES); ?></h2>
      </div>
      <div class="grid">
        <label>
          <div class="lbl" data-i18n="account.password.current"><?php echo htmlspecialchars($t('account.password.current', 'Current password'), ENT_QUOTES); ?></div>
          <input id="accountPasswordCurrent" type="password">
        </label>
        <label>
          <div class="lbl" data-i18n="account.password.new"><?php echo htmlspecialchars($t('account.password.new', 'New password'), ENT_QUOTES); ?></div>
          <input id="accountPasswordNew" type="password">
        </label>
        <label>
          <div class="lbl" data-i18n="account.password.confirm"><?php echo htmlspecialchars($t('account.password.confirm', 'Confirm password'), ENT_QUOTES); ?></div>
          <input id="accountPasswordConfirm" type="password">
        </label>
        <div class="row">
          <button id="btnPasswordChange" class="btn" type="button" data-i18n="account.password.change"><?php echo htmlspecialchars($t('account.password.change', 'Change password'), ENT_QUOTES); ?></button>
          <span class="hint" id="accountPasswordHint"></span>
        </div>
      </div>
    </section>
  </main>

  <script>
    window.I18N = <?php echo json_encode($dict, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
    window.APP_LANG = <?php echo json_encode($lang, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;
    window.DEBUG_TOOLS_ENABLED = <?php echo !empty($debugToolsEnabled) ? 'true' : 'false'; ?>;
  </script>
  <script src="/assets/js/ui.js"></script>
  <script src="/assets/js/api.js"></script>
  <script src="/assets/js/prefs.js"></script>
  <script src="/assets/js/auth.js"></script>
  <script src="/assets/js/sse.js"></script>
  <script src="/assets/js/account.js"></script>
</body>
</html>
