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

{% 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"><a href="{% url 'program_detail' course.program.id %}">{{ course.program }}</a></li>
        <li class="breadcrumb-item"><a href="{% url 'course_detail' course.slug %}">{{ course }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Video upload</li>
    </ol>
</nav>
    
<p class="title-1">Video upload for {{ course }}</p>
<div class="title-line"></div><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 %}

<div class="row">
<div class="col-md-8 p-0 mx-auto">
    <div class="card">
    <p class="form-title">Video Upload Form</p><br>
    <form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
        <div class="container">
            
            <div class="form-group">
                <b>Video Name</b>{{ form.title }}
                <span class="danger">{{ form.title.errors }}</span>
            </div>
            <div class="form-group">
                <b>Video</b><br>{{ form.video }}
                <span class="danger">{{ form.video.errors }}</span>
            </div>
            <p class="text-orange"><b>Valid video formats: </b>'mp4', 'mkv', 'wmv', '3gp', 'f4v', 'avi', 'mp3'</p>
            <div class="form-group">
                <select hidden name="course" required="" id="id_course">
                    <option value="{{ course.pk }}" selected>{{ course }}</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit">Upload</button>
                <a class="btn btn-danger" href="{% url 'course_detail' course.slug %}" style="float: right;">Cancel</a>
            </div>

        </div>
        <br>
        <div class="card">
    </form>
</div>
</div>

{% endblock content %}