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

  .bg-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.2) 0%, rgba(255, 107, 0, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 6s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes pulse {

    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.5;
    }

    50% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0.7;
    }
  }

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

  .logo-section {
    text-align: center;
    margin-bottom: 16px;
  }

  .logo-img {
    max-width: 140px;
    height: auto;
    filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.7));
  }

  .logo-subtitle {
    font-size: 0.8rem;
    color: #FFA500;
    margin-top: 6px;
  }

  .signup-card {
    background: rgba(255, 107, 0, 0.08);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 140, 0, 0.3);
    border-radius: 16px;
    padding: 20px;
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.6),
      0 0 30px rgba(255, 140, 0, 0.15);
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }

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

  .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #FFD700;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .form-input {
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    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: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);
  }

  .btn-signup {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 3px solid #FFD700;
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 25px rgba(255, 140, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .btn-signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 35px rgba(255, 140, 0, 0.7);
  }

  .login-link {
    text-align: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 140, 0, 0.2);
  }

  .login-link a {
    color: #FFA500;
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.3s ease;
  }

  .login-link a:hover {
    color: #FFD700;
    text-decoration: none;
  }

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

  .telegram-link {
    color: #FFD700;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
  }

  @media (max-width: 600px) {
    .form-row {
      grid-template-columns: 1fr;
    }
  }

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

  [data-theme="light"] .logo-section svg {
    color: #FF6B00 !important;
    filter: none !important;
  }

  [data-theme="light"] .logo-subtitle {
    color: #FF6B00 !important;
    text-shadow: none !important;
  }

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

  [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"] .login-link a {
    color: #FF6B00;
  }

  [data-theme="light"] .login-link a:hover {
    color: #FF8C00;
  }

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

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

<div class="signup-wrapper">
  <div class="bg-glow"></div>

  <div class="signup-container">
    <div class="logo-section">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round"
        style="width: 48px; height: 48px; color: #FFD700; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));">
        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
        <circle cx="8.5" cy="7" r="4" />
        <line x1="20" y1="8" x2="20" y2="14" />
        <line x1="23" y1="11" x2="17" y2="11" />
      </svg>
      <div class="logo-subtitle"
        style="font-size: 1.1rem; font-weight: 800; color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); margin-top: 10px;">
        Регистрация</div>
    </div>

    <div class="signup-card">
      <form method="post">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-user"></i> Имя
            </label>
            <input type="text" name="first_name" class="form-input" required>
          </div>
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-user"></i> Фамилия
            </label>
            <input type="text" name="last_name" class="form-input" required>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-envelope"></i> Почта (реальная)
          </label>
          <input type="text" name="username" class="form-input" required>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-lock"></i> Пароль
          </label>
          <input type="password" name="password" class="form-input" required>
        </div>

        <div class="form-group">
          <label class="form-label">
            <i class="fas fa-check-circle"></i> Подтвердить пароль
          </label>
          <input type="password" name="confirm_password" class="form-input" required>
        </div>

        <button type="submit" class="btn-signup">
          <i class="fas fa-user-plus"></i> Зарегистрироваться
        </button>

        <div class="login-link">
          <a href="{{ url_for('login') }}">
            <i class="fas fa-arrow-left"></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> Telegram канал
      </a>
    </div>
  </div>
</div>

{% endblock %}