{% extends 'dash-back.html' %}
{% load crispy_forms_tags %}

{% block title %}Edit Profile | Job Board{% endblock %}

{% block dash %}
<div class="container-fluid py-4">
  <div class="row justify-content-center">
    <div class="col-lg-9">
      <!-- Header Card -->
      <div class="card shadow-sm mb-4">
        <div class="card-body p-4">
          <div class="d-flex align-items-center">
            <div class="bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center text-white me-3" style="width:60px;height:60px;font-size:1.5rem;font-weight:600;"></div>
            <div>
              <h4 class="mb-1">Edit Profile</h4>
              <p class="text-muted mb-0">Update your personal information and settings</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Form Card -->
      <div class="card shadow-sm">
        <div class="card-header bg-white py-3">
          <h5 class="mb-0">Profile Information</h5>
        </div>
        <div class="card-body p-4">
          <form method="post" enctype="multipart/form-data" novalidate>
            {% csrf_token %}

            {% if form.non_field_errors %}
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ form.non_field_errors }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            {% endif %}

            {% include 'partials/alert.html' %}

            <div class="row g-3">
              {{ form|crispy }}
            </div>

            <hr class="my-4">

            <div class="d-flex flex-column flex-sm-row justify-content-between gap-3">
              <a href="{% url 'view_profile' %}" class="btn btn-outline-secondary">Cancel</a>
              <button type="submit" class="btn btn-primary">Update Profile</button>
            </div>
          </form>
        </div>
      </div>

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

{% endblock %}