{% extends "base.html" %}

{% block title %}Login{% endblock %}
{% block meta_description %}Log in to your Tecvico client portal.{% endblock %}

{% block content %}
<section class="page-hero" aria-labelledby="login-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Client Portal</div>
      <h1 class="page-hero-title" id="login-heading">Log In</h1>
      <p class="page-hero-subtitle">Access your project briefs and track progress with the Tecvico team.</p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container container--narrow">
    <div class="glass-card portal-card fade-in">
      {% include "accounts/_social_auth.html" %}

      <form method="post" novalidate>
        {% csrf_token %}
        {% if form.non_field_errors %}
        <div class="form-errors">{{ form.non_field_errors }}</div>
        {% endif %}

        <div class="form-group">
          <label for="id_username">Username <span class="required-star">*</span></label>
          {{ form.username }}
          {{ form.username.errors }}
        </div>

        <div class="form-group">
          <label for="id_password">Password <span class="required-star">*</span></label>
          {{ form.password }}
          {{ form.password.errors }}
        </div>

        <button type="submit" class="btn-primary btn-submit">Log in</button>
      </form>

      <p class="portal-footer-text">
        <a href="{% url 'accounts:password_reset' %}">Forgot password?</a>
        ·
        <a href="{% url 'accounts:signup' %}">Create account</a>
      </p>
    </div>
  </div>
</section>
{% endblock %}