{% extends 'base.html' %}

{% block content %}
<section class="py-5 d-flex align-items-center" style="min-height: 80vh;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <div class="glass-card p-4 p-md-5 rounded-0">
          <div class="text-center mb-5">
            <h2 class="brand-font fw-bold mb-3">Bem-vindo</h2>
            <p class="text-muted">Entre na sua conta FashionMock AI</p>
          </div>
          
          <form method="post">
            {% csrf_token %}
            <div class="mb-3">
              <label for="id_username" class="form-label small text-uppercase fw-bold">Usuário</label>
              <input type="text" name="username" class="form-control rounded-0" id="id_username" required>
            </div>
            <div class="mb-4">
              <label for="id_password" class="form-label small text-uppercase fw-bold">Senha</label>
              <input type="password" name="password" class="form-control rounded-0" id="id_password" required>
            </div>
            
            <button type="submit" class="btn btn-fashion w-100 py-3 mb-3">ENTRAR</button>
            
            <div class="text-center">
              <a href="#" class="text-muted small">Esqueceu a senha?</a>
              <hr class="my-4">
              <p class="small text-muted">Ainda não tem conta? <a href="#" class="text-dark fw-bold">Crie uma agora</a></p>
            </div>
          </form>
          
          <div class="mt-4">
            <button class="btn btn-outline-dark w-100 rounded-0 d-flex align-items-center justify-content-center gap-2 py-2">
              <img src="https://www.google.com/favicon.ico" width="16" height="16" alt="Google">
              Continuar com Google
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}
