{% extends "base_side.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% load widget_tweaks %}

{% block maincontent %}
    <h1 class="page-header">
        <span class="fa fa-pencil fa-fw"></span>
        {% trans "View &amp; Edit: " %}
        <span class="item-type">{{ item_type_label }}</span>
    </h1>
    <div class="col-lg-8 col-lg-offset-2">
        <form id="single-item-form" role="form" method="POST">
            {% csrf_token %}
            {{ form.id }}
            {{ form.next }}
            <div class="panel panel-default"><div class="panel-body">
                <div class="col-xs-12"><div class="row">
                    <div class="col-xs-12">
                        <p class="item-meta-info">
                            {% trans "Added on " %}
                            <span class="item-meta item-date-added">{{ item.created }}</span>
                            {% trans "Updated on " %} 
                            <span class="item-meta item-date-updated">{{ item.last_modified }}</span>
                        </p>
                    </div>
                    <div class="col-xs-12">
                        <div class="col-xs-12 input-group form-group item-text">
                            <label> 
                                {{ item_type_label }}
                                <span class="item-id">{{ item.id }}</span> 
                            </label>
                            {{ form.body|add_class:'form-control'|attr:"rows:4"|attr:"placeholder:Type your question text here" }}
                        </div>
                        {% if form.tags %}
                            <div class="col-xs-12 form-group input-group item-tags">
                              <span class="input-group-addon"><span class="fa fa-tags fa-fw"></span> {% trans "Tags" %}</span>
                              {{ form.tags|add_class:'form-control'|attr:'placeholder:type and hit enter'|attr:'data-role:tagsinput' }}
                            </div>
                        {% endif %}
                    </div>
                    <div class="col-lg-12 col-md-12">
                        <div class="col-sm-{{ option_row_width }} col-xs-12 pull-left form-group input-group item-reported-date">
                            <label>{% trans "Reported date" %}</label>
                            {{ form.timestamp|add_class:'form-control'|attr:"placeholder:yyyy-mm-dd"|attr:"aria-describedby:basic-addon1" }}
                        </div>
                        {% if form.category %}
                            <div class="col-sm-{{ option_row_width }} col-xs-12 pull-left form-group input-group item-category">
                                <label>{{ item_type_label}} {% trans "type" %}</label>
                                <div class="selectContainer">
                                    {{ form.category|add_class:'form-control' }}
                                </div>
                            </div>
                        {% endif %}
                        {% if form.region %}
                            <div class="col-sm-{{ option_row_width }} col-xs-12 pull-left form-group input-group item-region">
                                <label>{% trans "Region" %}</label>
                                <div class="selectContainer">
                                    {{ form.region|add_class:'form-control' }}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div></div>
                <div class="col-xs-12">
                    <div class="form-group btn-group pull-left">
                        {% bootstrap_button "Delete" button_type="submit" name="action" value="delete" button_class="btn btn-danger btn-sm" %}
                    </div>
                    <div class="form-group btn-group pull-right">
                        {% bootstrap_button "Cancel" button_type="submit" name="action" value="cancel" button_class="btn btn-sm" %}
                        {% bootstrap_button "Update" button_type="submit" name="action" value="update" button_class="btn btn-sm btn-success" %}
                    </div>
                </div>  
            </div></div>
        </form>
    </div>
{% endblock maincontent %}