{% extends "base.html" %}
{% load bootstrap4 %}

{% block title %}Training Materials{% endblock title %}

{% block content %}
<br><br>
<section class="page-section" id="services">
    <div class="container">
        <h2>Training Materials</h2>
        <br>
        <h4>List of Materials</h4>
        {% for material in materials%}
        <div class="row">
            <div class="col-3">{{material.name}}</div>
            <div class="col-4">{{material.description}}</div>
            <div class="col-2"><a href="{% if material.file %}{{material.file.url}}{%endif%}">File</a></div>
            <div class="col-2"><a class="btn btn-sm btn-success" href="{% url 'web:training_materials' %}{{ material.id }}/">Select</a></div>
            <div class="col-1"><a class="btn btn-sm btn-danger" target="_blank" href="{% url 'web:training_materials_delete' %}{{ material.id }}/">X</a></div>
        </div>
        {%endfor%}
        <br>
        <div class="row">
            <div class="col-9">{{material.name}}</div>
            <div class="col-2"><a class="btn btn-sm btn-success" href="{% url 'web:training_materials' %}">New</a></div>
            <div class="col-1"></div>
        </div>
        <br>
        <br>
        <h4>Upload/Change</h4>
        <div class="row">
            <div class="col-8">
                <form method="post" method="post" class="form" enctype="multipart/form-data">
                    {{ upload_form.management_form }}
                    {% csrf_token %}
                    {% bootstrap_form upload_form %}
                    {% buttons %}
                    <button type="submit" class="btn btn-sm btn-info">Save</button>
                    {% endbuttons %}
                </form>        
            </div>
            <div class="col-2"></div>
            <div class="col-2"></div>
        </div>
    </div>
</section>
{% endblock content %}