@import url('colors.css');

body {
  background-color: var(--silver-color);
  display: flex;
  min-height: 100vh;  {% extends "base.html" %}
  
  {% block head_css %}
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    rel="stylesheet"
  />
  <link
    rel="stylesheet"
    type="text/css"
    href="{{ url_for('static', filename='styles/confirm_otp.css') }}"
  />
  {% endblock %}
  
  {% block content %}
  <div class="container py-3">
    <div class="auth-card card shadow-sm mx-auto p-4">
      <!-- Branding -->
      <div class="d-flex align-items-center justify-content-center mb-3">
        <img
          src="{{ url_for('static', filename='images/logo.png') }}"
          alt="Logo"
          class="company-logo me-2"
        />
        <span class="fs-4 fw-semibold">MILLS STUDIOS</span>
      </div>
  
      <h5 class="text-center mb-3">Reset Your Password</h5>
      <p class="text-center text-muted small mb-4">
        Enter your email to receive a password reset link
      </p>
  
      <!-- Messages -->
      <div id="message-container">
        {% if error %}
        <div class="alert alert-danger alert-dismissible fade show">
          {{ error }}
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="alert"
            aria-label="Close"
          ></button>
        </div>
        {% endif %}
        
        {% if success %}
        <div class="alert alert-success alert-dismissible fade show">
          {{ success }}
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="alert"
            aria-label="Close"
          ></button>
        </div>
        {% endif %}
  
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show">
              {{ message }}
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="Close"
              ></button>
            </div>
            {% endfor %}
          {% endif %}
        {% endwith %}
      </div>
  
      <!-- Reset Request Form -->
      <form method="POST" action="{{ url_for('auth_bp.forgot_password') }}">
        {% if csrf_token %}
          {{ csrf_token() }}
        {% endif %}
  
        <div class="mb-3">
          <input
            type="email"
            id="email"
            name="email"
            class="form-control"
            placeholder="Enter your email address"
            required
            value="{{ request.form.email if request.form.email else '' }}"
            autofocus
          />
        </div>
  
        <button type="submit" class="btn btn-otp w-100 mb-3">
          Send Reset Link
        </button>
      </form>
  
      <div class="text-center small">
        Remembered your password?
        <a
          href="{{ url_for('auth_bp.login') }}"
          class="text-decoration-none"
          id="resendOtp"
        >Sign in</a>
      </div>
    </div>
  </div>
  {% endblock %}
  align-items: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  border-color: 2px solid var(--gold-color);
}

.company-logo {
  height: 50px;
  width: 50px;
}

.announcement-bar, footer, .navbar {
  display: none !important;
}

.form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-otp {
  background-color: var(--silver) !important;
  color: var(--white) !important;
  border: var(--dark) 1px solid !important;
  transition: all 0.3s ease;
}

.btn-otp:hover {
  background-color: var(--dark) !important;
  color: var(--white) !important;
}

/* OTP Input Styling */
.otp-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.otp-input {
  width: 40px;
  height: 50px;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.otp-input:focus {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Resend Link */
#resendOtp {
  color: var(--dark);
  font-weight: 500;
}

#resendOtp:hover {
  text-decoration: underline;
}