{% extends 'base.html' %}
{% block title %}{{ title }} | Learning management system{% endblock title %}
{% load crispy_forms_tags %}
{% load static %}

{% block content %}

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">Home</a></li>
      <li class="breadcrumb-item"><a href="{% url 'student_list' %}">Students</a></li>
      <li class="breadcrumb-item active" aria-current="page">Update</li>
    </ol>
</nav>

<h4 class="fw-bold mb-3"><i class="fas fa-cog me-2"></i>Student Update Form</h4>

{% if messages %}
    {% for message in messages %}
        {% if message.tags == 'error' %}
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle"></i>{{ message }}
            </div>
        {% else %}
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>{{ message }}
            </div>
        {% endif %}
    {% endfor %}
{% endif %}

<form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="card">
            <p class="form-title">Email & Personal Info</p>

            <div class="p-3">
                <div class="form-group">
                    <b>{{ form.email.label }}</b>{{ form.email }}
                    <span class="danger">{{ form.email.errors }}</span>
                </div>
                <div class="form-group">
                    <b>{{ form.first_name.label }}</b>{{ form.first_name }}
                    <span class="danger">{{ form.first_name.errors }}</span>
                </div>
                <div class="form-group">
                    <b>{{ form.last_name.label }}</b>{{ form.last_name }}
                    <span class="danger">{{ form.last_name.errors }}</span>
                </div>
                <div class="form-group">
                    <b>{{ form.phone.label }}</b>{{ form.phone }}
                    <span class="danger">{{ form.phone.errors }}</span>
                </div>
                <div class="form-group">
                    <b>{{ form.address.label }}</b>{{ form.address }}
                    <span class="danger">{{ form.address.errors }}</span>
                </div>
                </div>

            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
            <p class="form-title">Others</p>
            <div class="p-3">
                <div class="form-group">
                    <b>Profile Picture</b><br>{{ form.picture }}
                    <span class="danger">{{ form.picture.errors }}</span>
                </div>
            </div>
            </div>
        </div>
    </div>
    <input class="btn btn-primary" type="submit" value="Save">
</form>
{% endblock content %}