{% extends "base.html" %}

{% block title %}Profile{% endblock %}

{% block content %}
<section class="page-hero" aria-labelledby="profile-heading">
  <div class="container">
    <div class="page-hero-content">
      <h1 class="page-hero-title" id="profile-heading">Your Profile</h1>
      <p class="page-hero-subtitle">Keep your contact details up to date for project communication.</p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container container--narrow">
    <div class="glass-card portal-card fade-in">
      <form method="post" novalidate>
        {% csrf_token %}

        <div class="form-grid form-grid--2">
          <div class="form-group">
            <label for="id_first_name">First name <span class="required-star">*</span></label>
            {{ form.first_name }}
            {{ form.first_name.errors }}
          </div>
          <div class="form-group">
            <label for="id_last_name">Last name <span class="required-star">*</span></label>
            {{ form.last_name }}
            {{ form.last_name.errors }}
          </div>
        </div>

        <div class="form-group">
          <label for="id_email">Email <span class="required-star">*</span></label>
          {{ form.email }}
          {{ form.email.errors }}
        </div>

        <div class="form-grid form-grid--2">
          <div class="form-group">
            <label for="id_company">Company</label>
            {{ form.company }}
            {{ form.company.errors }}
          </div>
          <div class="form-group">
            <label for="id_phone">Phone</label>
            {{ form.phone }}
            {{ form.phone.errors }}
          </div>
        </div>

        <div class="form-group">
          <label for="id_timezone">Timezone <span class="required-star">*</span></label>
          {{ form.timezone }}
          {{ form.timezone.errors }}
        </div>

        <button type="submit" class="btn-primary btn-submit">Save profile</button>
      </form>
    </div>
  </div>
</section>
{% endblock %}