{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-7">
    <div class="card shadow-sm">
      <div class="card-body p-4">
        <h3 class="mb-3 text-center">Login</h3>

        <form method="POST" action="{{ url_for('login') }}">
          <div class="mb-3">
            <label class="form-label">User Name / Email</label>
            <input name="username" class="form-control" placeholder="you@example.com" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <input name="password" type="password" class="form-control" placeholder="••••••" required>
          </div>
          <div class="d-flex justify-content-between align-items-center mb-3">
            <a href="#" data-bs-toggle="modal" data-bs-target="#forgotModal" class="small">Forgot password?</a>
            <button class="btn btn-primary">Login</button>
          </div>
        </form>

        <hr>
        <p class="text-center small mb-0">New here? Register below</p>

        <form method="POST" action="{{ url_for('register') }}" class="mt-3">
          <div class="mb-2">
            <input name="email" class="form-control" placeholder="email to register" required>
          </div>
          <div class="mb-2">
            <input name="password" type="password" class="form-control" placeholder="create password" required>
          </div>
          <div class="d-grid">
            <button class="btn btn-outline-primary">Register</button>
          </div>
        </form>

      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="forgotModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form onsubmit="alert('If this were real, a reset link would be sent (demo)'); return false;">
        <div class="modal-header">
          <h5 class="modal-title">Reset Password</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input class="form-control" placeholder="Enter your email" required>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">Send reset link</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}