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

$centerTitle = $t('auth.login_title', 'Sign in');
$centerI18n = 'auth.login_title';
$toolbarLeftHtml = '';
$toolbarRightHtml = '';
$statusHidden = true;
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title data-i18n="auth.page_title"><?php echo htmlspecialchars($t('auth.page_title', 'scMedia / Login'), ENT_QUOTES); ?></title>
  <link rel="stylesheet" href="/assets/css/common.css">
  <link rel="stylesheet" href="/assets/css/auth.css">
</head>
<body>
  <main class="auth-layout">
    <section class="auth-card">
      <div class="auth-head">
        <h1 data-i18n="auth.login_title"><?php echo htmlspecialchars($t('auth.login_title', 'Sign in'), ENT_QUOTES); ?></h1>
        <div class="auth-lang">
          <form class="lang-form" method="get" action="/lang">
            <input type="hidden" name="next" value="/login">
            <select name="lang" aria-label="<?php echo htmlspecialchars($t('settings.language', 'Language'), ENT_QUOTES); ?>" onchange="this.form.submit()">
              <option value="ru"<?php echo $lang === 'ru' ? ' selected' : ''; ?>>RU</option>
              <option value="en"<?php echo $lang === 'en' ? ' selected' : ''; ?>>EN</option>
              <option value="de"<?php echo $lang === 'de' ? ' selected' : ''; ?>>DE</option>
            </select>
          </form>
        </div>
      </div>
      <p class="muted" data-i18n="auth.login_hint"><?php echo htmlspecialchars($t('auth.login_hint', 'Use your email and password.'), ENT_QUOTES); ?></p>

      <div id="loginForm" class="auth-form">
        <label>
          <span data-i18n="auth.email"><?php echo htmlspecialchars($t('auth.email', 'Email'), ENT_QUOTES); ?></span>
          <input id="loginEmail" type="email" autocomplete="username" placeholder="you@example.com">
        </label>
        <label>
          <span data-i18n="auth.password"><?php echo htmlspecialchars($t('auth.password', 'Password'), ENT_QUOTES); ?></span>
          <input id="loginPassword" type="password" autocomplete="current-password">
        </label>
        <label class="auth-remember">
          <input id="loginRemember" type="checkbox" checked>
          <span data-i18n="auth.remember"><?php echo htmlspecialchars($t('auth.remember', 'Remember session'), ENT_QUOTES); ?></span>
        </label>
        <button id="btnLogin" class="btn primary" type="button" data-i18n="auth.login_btn"><?php echo htmlspecialchars($t('auth.login_btn', 'Sign in'), ENT_QUOTES); ?></button>
        <button id="btnForgot" class="btn ghost" type="button" data-i18n="auth.forgot"><?php echo htmlspecialchars($t('auth.forgot', 'Forgot password?'), ENT_QUOTES); ?></button>
      </div>

      <div id="mfaForm" class="auth-form is-hidden">
        <div class="mfa-title" data-i18n="auth.mfa_title"><?php echo htmlspecialchars($t('auth.mfa_title', 'Two-factor code'), ENT_QUOTES); ?></div>
        <label>
          <span data-i18n="auth.mfa_code"><?php echo htmlspecialchars($t('auth.mfa_code', 'Code'), ENT_QUOTES); ?></span>
          <input id="mfaCode" type="text" inputmode="numeric" autocomplete="one-time-code">
        </label>
        <button id="btnMfaVerify" class="btn primary" type="button" data-i18n="auth.mfa_verify"><?php echo htmlspecialchars($t('auth.mfa_verify', 'Verify'), ENT_QUOTES); ?></button>
      </div>

      <div id="forgotForm" class="auth-form is-hidden">
        <label>
          <span data-i18n="auth.email"><?php echo htmlspecialchars($t('auth.email', 'Email'), ENT_QUOTES); ?></span>
          <input id="forgotEmail" type="email" autocomplete="username" placeholder="you@example.com">
        </label>
        <button id="btnForgotSend" class="btn primary" type="button" data-i18n="auth.forgot_send"><?php echo htmlspecialchars($t('auth.forgot_send', 'Send reset link'), ENT_QUOTES); ?></button>
        <button id="btnForgotBack" class="btn ghost" type="button" data-i18n="common.back"><?php echo htmlspecialchars($t('common.back', 'Back'), ENT_QUOTES); ?></button>
      </div>

      <div id="loginError" class="auth-error is-hidden"></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); ?>;
  </script>
  <script src="/assets/js/auth.js"></script>
  <script src="/assets/js/login.js"></script>
</body>
</html>
