{% extends 'base.html' %}
{% load i18n bootstrap3 globaltags %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span></li>
        <li><a href="{% url 'mapapp:options' %}">{% trans 'Map settings' %}</a></li>
        {% if dot.id %}
        <li class="active">{{ dot.title }}</li>
        {% url 'mapapp:edit_dot' dot.id as form_url %}
        {% else %}
        <li class="active">{% trans 'Add new point' %}</li>
        {% url 'mapapp:add_dot' as form_url %}
        {% endif %}
    </ol>
{% endblock %}


{% block page-header %}
    {% trans 'Map point' %}
{% endblock %}


{% block main %}
<div class="row">
    <div class="{% if dot.id %}col-sm-6{% else %}col-sm-12{% endif %}">
        <form role="form" action="{{ form_url }}" method="post" enctype="multipart/form-data">{% csrf_token %}
            <input type="hidden" name="MAX_FILE_SIZE" value="{% global_var 'FILE_UPLOAD_MAX_MEMORY_SIZE' %}"/>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans 'Map point' %}</h3>
                </div>
                <div class="panel-body">

                    {# title input #}
                    {% bootstrap_icon 'edit' as ic %}
                    {% bootstrap_field form.title addon_before=ic %}

                    {# longitude input #}
                    {% bootstrap_icon 'globe' as ic %}
                    {% bootstrap_field form.longitude addon_before=ic %}

                    {# latitude input #}
                    {% bootstrap_icon 'globe' as ic %}
                    {% bootstrap_field form.latitude addon_before=ic %}

                    {# attachment input #}
                    {% bootstrap_field form.attachment %}

                </div>
                <div class="panel-footer">
                    <div class="btn-group btn-group-sm">
                        <button type="submit" class="btn btn-primary">
                            <span class="glyphicon glyphicon-save"></span> {% trans 'Save' %}
                        </button>
                        <button type="reset" class="btn btn-default">
                            <span class="glyphicon glyphicon-remove-circle"></span> {% trans 'Reset' %}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {% if dot.id %}
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{% trans 'Devices' %}</h3>
            </div>
            <table class="table">
                {% for dev in dot.devices.all %}
                <tr>
                    <td>
                        {% if dev.group %}
                            <a href="{% url 'devapp:view' dev.group.pk dev.pk %}">{{ dev.comment }}</a>
                        {% else %}
                            <a href="{% url 'devapp:view' 0 dev.pk %}">{{ dev.comment }}</a>
                        {% endif %}
                    </td>
                    <td>{{ dev.ip_address|default:'-' }}</td>
                    <td>{{ dev.get_comment_display }}</td>
                    <td>
                        {% if dev.group %}
                        <a href="{% url 'abonapp:people_list' dev.group.pk %}">
                            {{ dev.group }}
                        </a>
                        {% else %}
                        {% trans 'User group has no attached' %}
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="3">{% trans 'Devices not found' %}</td>
                </tr>
                {% endfor %}
            </table>
            <div class="panel-footer">
                {% url 'mapapp:add_dev' dot.pk as url %}
                {% bootstrap_button _('Add') button_type="link" icon='plus' size='sm' button_class='btn-success' href=url %}
            </div>
        </div>
    </div>
    {% endif %}
</div>

{% endblock %}