{% extends request.is_ajax|yesno:'bajax.html,base.html' %}
{% block main %}

    <ol class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span></li>
        <li><a href="{% url 'taskapp:home' %}">Задачи</a></li>
        <li class="active">{% if task_id %}Редактировать{% else %}Создать{% endif %}</li>
    </ol>

    {% include 'message_block.html' %}

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Добавьте новую задачу</h3>
        </div>
        <div class="panel-body">

            {% if task_id %}
                <form role="form" action="{% url 'taskapp:edit' task_id %}" method="post" enctype="multipart/form-data">
            {% else %}
                <form role="form" action="{% url 'taskapp:add' %}" method="post" enctype="multipart/form-data">
            {% endif %}
            {% csrf_token %}<input type="hidden" name="MAX_FILE_SIZE" value="409600"/>

            <div class="form-group">
                <label for="id_descr">Пару слов...</label>

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-tag"></span></span>
                    {{ form.descr }}{{ form.descr.errors }}
                </div>
            </div>
            <div class="form-group">
                <label for="id_mode">Характер поломки</label>

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-pawn"></span></span>
                    {{ form.mode }}{{ form.mode.errors }}
                </div>
            </div>
            <div class="form-group">
                <label for="id_priority">Приоритет</label>

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-sort-by-order"></span></span>
                    {{ form.priority }}{{ form.priority.errors }}
                </div>
            </div>
            <div class="form-group">
                <label for="id_state">Состояние</label>

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-retweet"></span></span>
                    {{ form.state }}{{ form.state.errors }}
                </div>
            </div>
            <div class="form-group">
                <label for="id_abon">Абонент</label>

                <div class="input-group selectajax">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="hidden" name="abon" class="selectajax-hid"{% if selected_abon %} value="{{ selected_abon.id }}"{% endif %}>
                {% if selected_abon %}
                    <button class="selectajax-btn form-control btn btn-default">{{ selected_abon.fio }}</button>
                    <input type="text" class="form-control dropdown-toggle selectajax-inp hidden" data-toggle="dropdown" id="id_abon" placeholder="Найти абонента">
                {% else %}
                    <button class="selectajax-btn form-control btn btn-default hidden"></button>
                    <input type="text" class="form-control dropdown-toggle selectajax-inp" data-toggle="dropdown" id="id_abon" placeholder="Найти абонента">
                {% endif %}
                    <ul class="dropdown-menu selectajax-ul"></ul>{{ form.abon.errors }}
                </div>
            </div>
            <div class="form-group">
                <label for="id_out_date">Актуальность (дата, до которой нужно завершить задачу)</label>

                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    {{ form.out_date }}{{ form.out_date.errors }}
                </div>
                <script type="text/javascript" src="/static/js/datetime_with_moment.min.js"></script>
                <script type="text/javascript">
                    $(function () {
                        $('#id_out_date').datetimepicker({
                            format: 'YYYY-MM-DD'
                        });
                    });
                </script>
            </div>
            <div class="form-group">
                <label for="id_attachment">Прикреплённое изображение</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
                    {{ form.attachment }}{{ form.attachment.errors }}
                </div>
            </div>
            <div class="btn-group">
                <button type="submit" class="btn btn-sm btn-primary">
                    <span class="glyphicon glyphicon-save"></span> Сохранить
                </button>
                <button type="reset" class="btn btn-sm btn-default">
                    <span class="glyphicon glyphicon-remove-circle"></span> Сбросить
                </button>
            </div>
            </form>
        </div>
    </div>

{% endblock %}