{% extends "base.html" %}

{% block head_title %}Upload | VidMio{% endblock head_title%}

{% block content %}
    <h1>upload video testform</h1>
    <form method='POST' enctype="multipart/form-data"> {% csrf_token %}
        <div class="form-container" style="box-shadow: 0 0 5px black;">
            <div class="container">
                <div class="row">
                    <div class="file-input col-md-6">
                        <fieldset>
                            <legend>Files</legend>
                            <div class="field-wrapper-thumbnail field-wrapper">
                                {% if form.thumbnail.errors %}
                                <ol class="error-list-thumbnail error-list">
                                    {% for error in form.thumbnail.errors %}
                                        <li class = "error-list-element-thumbnail error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                <label class="label-thumbnail form-label" for="{{ form.thumbnail.id_for_label }}">Thumbnail:</label>
                                <input id="thumbnail" type="file" name="thumbnail"  class="input input-thumbnail form-control">
                            </div>
                            <small>
                                list of thumbnails chosen at random from uploaded file
                            </small>
                        </fieldset>
                    </div>

                    <div class="detail-input col-md-6">
                        <fieldset>
                            <legend>Details</legend>
                            <div class="field-wrapper-title field-wrapper">
                                {% if form.title.errors %}
                                <ol class="error-list-title error-list">
                                    {% for error in form.title.errors %}
                                        <li class = "error-list-element-title error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                 <div class="row">
                                    <div class="col-md-3">
                                        <label class="label-title form-label" for="{{ form.title.id_for_label }}">Title:</label>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="title" type="textfield" name="title" class="input input-title form-control">
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="field-wrapper-description field-wrapper">
                                {% if form.description.errors %}
                                <ol class="error-list-description error-list">
                                    {% for error in form.description.errors %}
                                        <li class = "error-list-element-description error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="label-description form-label" for="{{ form.description.id_for_label }}">Description:</label>
                                    </div>
                                    <div class="col-md-4">
                                        <textarea id="description" name="description" class="input input-description form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                </div>
                                <div class="col-md-8">
                                    <small>checkbox for copying description to list</small>
                                </div>
                            </div>
                            <div class="field-wrapper-description_short field-wrapper">
                                {% if form.description_short.errors %}
                                <ol class="error-list-description_short error-list">
                                    {% for error in form.description_short.errors %}
                                        <li class = "error-list-element-description_short error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="label-description_short form-label" for="{{ form.description_short.id_for_label }}">List Description:</label>
                                    </div>
                                    <div class="col-md-4">
                                        <textarea id="description_short" onkeyup="textCounter(this,'counter-description_short',300);" maxlength="300" name="description_short" class="input input-description_short form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                </div>
                                <div class="col-md-8">
                                    <small id="counter-label-description_short">Characters remaining: </small><small id="counter-description_short">300</small>
                                </div>
                            </div>
                            <script>
                                function textCounter(field,field2,maxlimit)
                                {
                                    var countfield = document.getElementById(field2);
                                    if ( field.value.length > maxlimit ) {
                                        field.value = field.value.substring( 0, maxlimit );
                                        return false;
                                    } else {
                                        document.getElementById("counter-description_short").innerHTML = maxlimit - field.value.length;
                                    }
                                    if (maxlimit - field.value.length < 50){
                                        document.getElementById("counter-description_short").style.color = "darkred";
                                        document.getElementById("counter-label-description_short").style.color = "darkred";
                                    } else {
                                        document.getElementById("counter-description_short").style.color = "black";
                                        document.getElementById("counter-label-description_short").style.color = "black";
                                    }
                                }
                            </script>
                            <div class="field-wrapper-category field-wrapper">
                                {% if form.category.errors %}
                                <ol class="error-list-category error-list">
                                    {% for error in form.category.errors %}
                                        <li class = "error-list-element-category error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="label-category form-label" for="{{ form.category.id_for_label }}">Category:</label>
                                    </div>
                                    <div class="col-md-4">
                                         <select id="category" name="category" class="input input-category form-control">
                                            {% for obj in categories%}
                                                <option value="{{obj.description}}">{{ obj.description.capitalize }}</option>
                                            {% endfor %}
                                         </select>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="field-wrapper-time field-wrapper">
                                {% if form.time.errors %}
                                <ol class="error-list-time error-list">
                                    {% for error in form.time.errors %}
                                        <li class = "error-list-element-time error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="label-time form-label" for="{{ form.time.id_for_label }}">Time:</label>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="time" type="number" name="time" class="input input-time form-control">
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="field-wrapper-type field-wrapper">
                                {% if form.type.errors %}
                                <ol class="error-list-type error-list">
                                    {% for error in form.type.errors %}
                                        <li class = "error-list-element-type error-list-element"><strong>{{ error|escape }}</strong></li>
                                    {% endfor %}
                                 </ol>
                                {% endif %}
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="label-type form-label" for="{{ form.type.id_for_label }}">Type:</label>
                                    </div>
                                    <div class="col-md-4">
                                         <select id="type" name="type" class="input input-type form-control">
                                             <option value="0" selected>Public</option>
                                             <option value="1">Private</option>
                                             <option value="2">Linkable</option>
                                         </select>
                                    </div>
                                </div>
                            </div>
                            <br>
                            {{ form.non_field_errors }}
                        </fieldset>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <small>here we will say something like accept the fucking terms and agreements when uploading </small>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="submit-button btn btn-primary" >Save</button>
                    </div>
                </div>
                <br>
            <div>
        </div>
    </form>

{% endblock content %}

        <!--<input type='text' name='title' placeholder="Enter Video Title">
        <input type='text' name='category' placeholder="Enter Video Category">
        <input type='text' name='description' placeholder="Enter Video Description">
        <input type='text' name='description_short' placeholder="Enter Video Description short">
        <input type='text' name='time' placeholder="Enter Video time">-->