{% 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 'programs' %}">Programs</a></li>
        <li class="breadcrumb-item active" aria-current="page">Course Form</li>
    </ol>
</nav>

<div class="title-1">Course Add &amp; Update Form</div>
<br>
<br>
{% 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">{% csrf_token %}
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <p class="form-title">Course Info</p>
                <div class="p-3">

                    <div class="form-group">
                        <b>{{ form.title.label }}</b>{{ form.title }}
                        <span class="danger">{{ form.title.errors }}</span>
                        <p class="text-muted-xs">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
                    </div>
                    <div class="form-group">
                        <b>{{ form.code.label }}</b>{{ form.code }}
                        <span class="danger">{{ form.code.errors }}</span>
                        <p class="text-muted-xs">The course code must be similar to only the pre requests.</p>
                    </div>
                    <div class="form-group">
                        <b>{{ form.summary.label }}</b>(optional){{ form.summary }}
                        <span class="danger">{{ form.summary.errors }}</span>
                        <p class="text-muted-xs">Enter some description about the course.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <p class="form-title">Applicant Info</p>
                <div class="p-3">
                    
                    <div class="form-group">
                        <b>{{ form.program.label }}</b>{{ form.program }}
                        <span class="danger">{{ form.program.errors }}</span>
                    </div>
                    <div class="form-group">
                        <b>{{ form.credit.label }}</b>{{ form.credit }}
                        <span class="danger">{{ form.credit.errors }}</span>
                    </div>
                    <div class="form-group">
                        <b>{{ form.year.label }}</b>{{ form.year }}
                        <span class="danger">{{ form.year.errors }}</span>
                    </div>
                    <div class="form-group">
                        <b>{{ form.semester.label }}</b>{{ form.semester }}
                        <span class="danger">{{ form.semester.errors }}</span>
                    </div>
                    <div class="form-group">
                        <b>{{ form.level.label }}</b>{{ form.level }}
                        <span class="danger">{{ form.level.errors }}</span>
                    </div>
                    <div class="form-group">
                        <b>{{ form.is_elective.label }}</b>{{ form.is_elective }}
                        <span class="danger">{{ form.is_elective.errors }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <center><input class="btn btn-outline-primary mt-3" type="submit" value="Save"></center>
</form>

{% endblock content %}