{% extends request.is_ajax|yesno:'bajax.html,base.html' %}
{% load i18n bootstrap3 %}

{% block title %}{% trans 'Add new device' %}{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span></li>
        <li><a href="{% url 'devapp:group_list' %}">{% trans 'Groups' %}</a></li>
        <li><a href="{% url 'devapp:devs' group.pk %}">{{ group.title }}</a></li>
        <li class="active">{% trans 'Add new device' %}</li>
    </ol>
{% endblock %}

{% block page-header %}
    {{ group.title|default:_('Not assigned') }}
{% endblock %}

{% block main %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans 'Device info' %}</h3>
        </div>
        <div class="panel-body">

            <form role="form" action="{% url 'devapp:add' group.pk %}" method="post" autocomplete="off">{% csrf_token %}

                {% bootstrap_icon 'globe' as ic %}
                {% bootstrap_field form.ip_address addon_before=ic %}

                {% bootstrap_icon 'globe' as ic %}
                {% bootstrap_field form.mac_addr addon_before=ic %}

                {% bootstrap_icon 'comment' as ic %}
                {% bootstrap_field form.comment addon_before=ic %}

                {% bootstrap_icon 'hdd' as ic %}
                {% bootstrap_field form.devtype addon_before=ic %}

                {% bootstrap_icon 'lock' as ic %}
                {% bootstrap_field form.man_passw addon_before=ic %}

                {% bootstrap_icon 'subscript' as ic %}
                {% bootstrap_field form.group addon_before=ic %}

                <div class="form-group">
                    <label for="id_parent_dev">{% trans 'Parent device' %}</label>

                    <div class="input-group selectajax" data-dst="/dev/search_dev">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-hdd"></span></span>
                        <input type="hidden" name="parent_dev" class="selectajax-hid"{% if selected_parent_dev %} value="{{ selected_parent_dev.pk }}"{% endif %}>

                        {% if selected_parent_dev %}
                            <button class="selectajax-btn form-control btn btn-default">
                                {{ selected_parent_dev.ip_address|default:'-' }}: {{ selected_parent_dev.comment }}
                            </button>
                        {% else %}
                            <button class="selectajax-btn form-control btn btn-default hidden"></button>
                        {% endif %}

                        <input type="text" class="form-control dropdown-toggle selectajax-inp{% if selected_parent_dev %} hidden{% endif %}" data-toggle="dropdown" id="id_parent_dev" placeholder="{% trans 'Find the device' %}">
                        <ul class="dropdown-menu selectajax-ul"></ul>{{ form.parent_dev.errors }}
                    </div>
                </div>

                {% bootstrap_icon 'list-alt' as ic %}
                {% bootstrap_field form.snmp_extra addon_before=ic %}

                {% bootstrap_field form.is_noticeable %}

                <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>

            </form>
        </div>
    </div>
{% endblock %}