{% extends "./layout.html" %}
{% block content %}
<style>
  .login-wrapper {
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 15px;
    position: relative;
    overflow-y: auto;
  }

  .bg-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.12) 0%, rgba(255, 107, 0, 0) 70%);
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
  }

  .bg-circle-1 {
    width: 200px;
    height: 200px;
    top: -80px;
    right: -80px;
  }

  .bg-circle-2 {
    width: 180px;
    height: 180px;
    bottom: -70px;
    left: -70px;
    animation-delay: 5s;
  }

  @keyframes float {

    0%,
    100% {
      transform: translate(0, 0);
    }

    50% {
      transform: translate(20px, -20px);
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .left-column,
  .right-column {
    background: rgba(255, 107, 0, 0.08);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 140, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .column-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 140, 0, 0.2);
  }

  .login-container {
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .news-section {
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 10px;
    max-height: 300px;
    overflow-y: auto;
  }

  .news-section::-webkit-scrollbar {
    width: 6px;
  }

  .news-section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    border-radius: 3px;
  }

  .news-section::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  .news-item {
    color: #FFA500;
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 140, 0, 0.1);
  }

  .news-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  .news-item i {
    color: #FFD700;
    margin-right: 6px;
  }

  .news-item.loading {
    text-align: center;
    color: #FFA500;
    font-style: italic;
  }

  .news-item.loading i {
    margin-right: 8px;
  }

  .scam-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255, 60, 60, 0.15), rgba(255, 140, 0, 0.15));
    border: 2px solid rgba(255, 100, 50, 0.5);
    border-radius: 10px;
    animation: scamPulse 3s ease-in-out infinite;
  }

  @keyframes scamPulse {

    0%,
    100% {
      border-color: rgba(255, 100, 50, 0.5);
    }

    50% {
      border-color: rgba(255, 60, 60, 0.7);
    }
  }

  .scam-warning>i {
    font-size: 1.3rem;
    color: #FF6347;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .scam-warning-text {
    font-size: 0.75rem;
    color: #FFF;
    line-height: 1.4;
  }

  .scam-warning-text strong {
    color: #FFD700;
    font-size: 0.8rem;
  }

  .logo-section {
    text-align: center;
    margin-bottom: 12px;
    animation: logoEnter 0.6s ease-out;
  }

  @keyframes logoEnter {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .logo-img {
    max-width: 100px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.6));
    margin-bottom: 6px;
  }

  .logo-subtitle {
    font-size: 0.75rem;
    color: #FFA500;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
  }

  .login-card {
    background: rgba(255, 107, 0, 0.08);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 140, 0, 0.3);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 140, 0, 0.12);
    animation: cardEnter 0.6s ease-out 0.15s both;
  }

  @keyframes cardEnter {
    from {
      opacity: 0;
      transform: translateY(15px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #FFD700;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  }

  .form-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid rgba(255, 140, 0, 0.3);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 0.8rem;
    transition: all 0.3s ease;
  }

  .form-input::placeholder {
    color: rgba(255, 165, 0, 0.4);
  }

  .form-input:focus {
    outline: none;
    border-color: #FFD700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
  }

  .checkbox-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
  }

  .checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #FF8C00;
  }

  .checkbox-label {
    font-size: 0.7rem;
    color: #FFA500;
    cursor: pointer;
    user-select: none;
  }

  .btn-login {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #FFD700;
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(255, 140, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
  }

  .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 28px rgba(255, 140, 0, 0.6);
  }

  .links-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 140, 0, 0.2);
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.7rem;
  }

  .link {
    color: #FFA500;
    text-decoration: none;
    font-size: 0.7rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .link:hover {
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    text-decoration: none;
  }

  .messages {
    margin-bottom: 12px;
  }

  .alert {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .alert-success {
    background: rgba(56, 239, 125, 0.12);
    border: 1px solid rgba(56, 239, 125, 0.3);
    color: #38EF7D;
  }

  .alert-danger {
    background: rgba(235, 51, 73, 0.12);
    border: 1px solid rgba(235, 51, 73, 0.3);
    color: #EB3349;
  }

  .telegram-section {
    text-align: center;
    margin-top: 12px;
    padding: 8px;
    background: rgba(255, 107, 0, 0.05);
    border: 1px solid rgba(255, 140, 0, 0.2);
    border-radius: 10px;
  }

  .telegram-link {
    color: #FFD700;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
  }

  .telegram-link:hover {
    color: #FFA500;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.5);
    text-decoration: none;
  }

  .login-wrapper::-webkit-scrollbar {
    width: 6px;
  }

  .login-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    border-radius: 3px;
  }

  .password-input-container {
    position: relative;
    display: flex;
    align-items: center;
  }

  .password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 165, 0, 0.6);
    cursor: pointer;
    padding: 5px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .password-toggle-btn:hover {
    color: #FFD700;
    background: rgba(255, 140, 0, 0.1);
  }

  .password-toggle-btn:focus {
    outline: none;
    color: #FFD700;
    background: rgba(255, 140, 0, 0.2);
  }

  @media (max-width: 768px) {
    .main-content {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .left-column,
    .right-column {
      padding: 15px;
    }

    .column-title {
      font-size: 1rem;
    }
  }

  @media (max-height: 600px) {
    .logo-img {
      max-width: 80px;
    }

    .login-card {
      padding: 12px;
    }

    .main-content {
      gap: 15px;
    }
  }

  /* === СВЕТЛАЯ ТЕМА === */
  [data-theme="light"] .left-column,
  [data-theme="light"] .right-column {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 107, 0, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  [data-theme="light"] .column-title {
    color: #FF6B00;
    text-shadow: none;
  }

  [data-theme="light"] .news-section {
    background: rgba(0, 0, 0, 0.05);
  }

  [data-theme="light"] .news-item {
    color: #333;
  }

  [data-theme="light"] .news-item i {
    color: #FF6B00;
  }

  [data-theme="light"] .scam-warning-text {
    color: #333;
  }

  [data-theme="light"] .scam-warning-text strong {
    color: #FF6B00;
  }

  [data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 107, 0, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  [data-theme="light"] .form-label {
    color: #FF6B00;
    text-shadow: none;
  }

  [data-theme="light"] .form-input {
    background: #f5f5f5;
    color: #333;
    border-color: rgba(255, 107, 0, 0.3);
  }

  [data-theme="light"] .form-input::placeholder {
    color: #999;
  }

  [data-theme="light"] .form-input:focus {
    background: #fff;
    border-color: #FF6B00;
  }

  [data-theme="light"] .checkbox-label {
    color: #333;
  }

  [data-theme="light"] .link {
    color: #FF6B00;
  }

  [data-theme="light"] .link:hover {
    color: #FF8C00;
    text-shadow: none;
  }

  [data-theme="light"] .telegram-section {
    background: rgba(255, 107, 0, 0.05);
  }

  [data-theme="light"] .telegram-link {
    color: #FF6B00;
  }

  [data-theme="light"] .telegram-link:hover {
    color: #FF8C00;
    text-shadow: none;
  }

  [data-theme="light"] .password-toggle-btn {
    color: #999;
  }

  [data-theme="light"] .password-toggle-btn:hover {
    color: #FF6B00;
    background: rgba(255, 107, 0, 0.1);
  }
</style>

<div class="login-wrapper">
  <div class="bg-circle bg-circle-1"></div>
  <div class="bg-circle bg-circle-2"></div>

  <!-- Основной контент в две колонки -->
  <div class="main-content">
    <!-- Левая колонка - форма логина -->
    <div class="left-column">
      <div class="column-title">ВХОД В reZWIFT</div>

      <div class="login-container">
        <div class="login-card">
          {% with messages = get_flashed_messages() %}
          {% if messages %}
          <div class="messages">
            {% for message in messages %}
            <div
              class="alert {% if 'успешно' in message.lower() or 'выш' in message.lower() %}alert-success{% else %}alert-danger{% endif %}">
              <i
                class="fas fa-{% if 'успешно' in message.lower() or 'выш' in message.lower() %}check-circle{% else %}exclamation-triangle{% endif %}"></i>
              {{ message }}
            </div>
            {% endfor %}
          </div>
          {% endif %}
          {% endwith %}

          <form method="post">
            <div class="form-group">
              <label class="form-label">
                <i class="fas fa-envelope"></i> Почта
              </label>
              <input type="text" name="username" class="form-input" placeholder="Введите имя" required
                autocomplete="username" value="{{ saved_username|default('', true) }}">
            </div>

            <div class="form-group">
              <label class="form-label">
                <i class="fas fa-lock"></i> Пароль
              </label>
              <div class="password-input-container">
                <input type="password" name="password" id="password-input" class="form-input"
                  placeholder="Введите пароль" required autocomplete="current-password">
                <button type="button" id="toggle-password" class="password-toggle-btn">
                  <i class="fas fa-eye" id="password-icon"></i>
                </button>
              </div>
            </div>

            <div class="checkbox-group">
              <input type="checkbox" id="remember_me" name="remember_me" value="true" {% if saved_username %}checked{%
                endif %}>
              <label for="remember_me" class="checkbox-label">Запомнить меня</label>
            </div>

            <button type="submit" class="btn-login">
              <i class="fas fa-sign-in-alt"></i> Войти
            </button>

            <div class="links-section">
              <a href="{{ url_for('signup') }}" class="link">
                <i class="fas fa-user-plus"></i> Регистрация
              </a>
              <a href="{{ url_for('forgot') }}" class="link">
                <i class="fas fa-question-circle"></i> Забыли пароль?
              </a>
            </div>
          </form>
        </div>

        <div class="telegram-section">
          <a href="https://t.me/rezwift" target="_blank" class="telegram-link">
            <i class="fab fa-telegram"></i> reZwift в Telegram
          </a>
        </div>
      </div>
    </div>

    <!-- Правая колонка - новости -->
    <div class="right-column">
      <div class="column-title">НОВОСТИ</div>

      <!-- Предупреждение о мошенниках -->
      <div class="scam-warning">
        <i class="fas fa-shield-alt"></i>
        <div class="scam-warning-text">
          <strong>reZwift полностью бесплатен!</strong><br>
          Если кто-то требует деньги за использование — это мошенники.
        </div>
      </div>

      <div class="news-section" id="news-container">
        <div class="news-item loading">
          <i class="fas fa-spinner fa-spin"></i> Загрузка новостей...
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // === ЗАГРУЗКА НОВОСТЕЙ ===
  async function loadNews() {
    const newsContainer = document.getElementById('news-container');

    try {
      // Загружаем JSON файл с новостями
      const response = await fetch('/static/web/launcher/news.json');
      if (!response.ok) {
        throw new Error('Не удалось загрузить новости');
      }

      const data = await response.json();

      // Очищаем контейнер
      newsContainer.innerHTML = '';

      // Добавляем новости
      data.news.forEach((newsItem, index) => {
        const newsElement = document.createElement('div');
        newsElement.className = 'news-item';
        newsElement.innerHTML = `
        <i class="${newsItem.icon}"></i> <strong>${newsItem.title}</strong><br>
        ${newsItem.content}
      `;
        newsContainer.appendChild(newsElement);
      });

      console.log('Новости успешно загружены');

    } catch (error) {
      console.error('Ошибка загрузки новостей:', error);

      // Fallback - показываем статические новости
      newsContainer.innerHTML = `
      <div class="news-item">
        <i class="fas fa-star"></i> <strong>Новое обновление v.1.7.2</strong><br>
        уже доступно! Множество новых функций и улучшений производительности.
      </div>

      <div class="news-item">
        <i class="fas fa-flag-checkered"></i> <strong>Присоединяйтесь к Tour de Watopia!</strong><br>
        Эпическая гонка ждет вас в самом сердце Zwift мира.
      </div>

      <div class="news-item">
        <i class="fas fa-lightbulb"></i> <strong>Советы по тренировкам от профи</strong><br>
        Узнайте секреты эффективных тренировок от лучших атлетов.
      </div>

      <div class="news-item">
        <i class="fas fa-exclamation-triangle"></i> <strong>Новости временно недоступны</strong><br>
        Попробуйте обновить страницу или проверьте подключение.
      </div>
    `;
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    const togglePassword = document.getElementById('toggle-password');
    const passwordInput = document.getElementById('password-input');
    const passwordIcon = document.getElementById('password-icon');

    if (togglePassword && passwordInput && passwordIcon) {
      togglePassword.addEventListener('click', function () {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);

        // Меняем иконку
        if (type === 'password') {
          passwordIcon.classList.remove('fa-eye-slash');
          passwordIcon.classList.add('fa-eye');
        } else {
          passwordIcon.classList.remove('fa-eye');
          passwordIcon.classList.add('fa-eye-slash');
        }
      });
    }

    // Загружаем новости
    loadNews();
  });
</script>

{% endblock %}