{% extends request.is_ajax|yesno:'nullcont.htm,abonapp/ext.htm' %}
{% load i18n bootstrap3 %}
{% block content %}

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        {% trans 'Change subscriber' %}
                        <small>{% trans 'Date joined' %}: {{ abon.birth_day|date:'d E Y' }}</small>
                    </h3>
                </div>
                <div class="panel-body">

                    {% if perms.abonapp.change_abon %}
                        {% url 'abonapp:abon_home' group.pk abon.username as ahlink %}
                    {% endif %}

                    <form autocomplete="off" class="form-horizontal" action="{{ ahlink|default:'#' }}" method="post">{% csrf_token %}

                        {% bootstrap_field form.username form_group_class='form-group-sm' %}
                        {% bootstrap_field form.fio form_group_class='form-group-sm' %}


                        {# telephone field #}
                        {% bootstrap_button '' button_type='link' icon='earphone' button_class='btn-default' title=_('Call to') href='sip:'|add:form.telephone.value size='sm' as btn_call %}

                        {% url 'abonapp:telephones' group.pk abon.username as url %}
                        {% bootstrap_button '' button_type='link' icon='list' button_class='btn-default btn-modal' title=_('Additional telephones') href=url size='sm' as btn_teleph_list %}

                        {% url 'abonapp:telephone_new' group.pk abon.username as url %}
                        {% bootstrap_button '' button_type='link' icon='plus' button_class='btn-default btn-modal' title=_('Add telephone') href=url size='sm' as btn_teleph_add %}

                        {% with ''|add:btn_call|add:btn_teleph_list|add:btn_teleph_add as bt %}
                            {% bootstrap_field form.telephone form_group_class='form-group-sm' addon_after_class='input-group-btn' addon_after=bt %}
                        {% endwith %}

                        {% bootstrap_field form.street form_group_class='form-group-sm' %}
                        {% bootstrap_field form.house form_group_class='form-group-sm' %}
                        {% bootstrap_field form.is_active form_group_class='form-group-sm' %}
                        {% bootstrap_field form.group form_group_class='form-group-sm' %}


                        {# password field #}
                        {% bootstrap_button '' button_type='button' icon='eye-open' button_class='btn-default' id='passwdtoggler' size='sm' as bt %}
                        {% bootstrap_field form.password form_group_class='form-group-sm' addon_after_class='input-group-btn' addon_after=bt %}


                        <script type="text/javascript">
                            $(function () {
                                $('#passwdtoggler').on('mousedown', function(){
                                    document.getElementById("{{ form.password.id_for_label }}").type='text';
                                }).on('mouseup', function(){
                                    document.getElementById("{{ form.password.id_for_label }}").type='password';
                                });
                            });
                        </script>

                        {% if perms.gw_app.change_nasmodel %}
                            {% bootstrap_field form.nas form_group_class='form-group-sm' %}
                        {% endif %}
                        {% bootstrap_field form.description form_group_class='form-group-sm' %}

                        <div class="form-group-sm">
                            <div class="btn-group btn-group-sm">

                                {% if perms.abonapp.change_abon %}
                                    {% bootstrap_button _('Save') button_type='submit' icon='floppy-disk' button_class='btn-primary' %}
                                {% else %}
                                    {% bootstrap_button _('Save') button_type='button' icon='floppy-disk' button_class='btn-primary disabled' %}
                                {% endif %}

                                {% if perms.taskapp.add_task %}
                                    <a href="{% url 'taskapp:add' %}?uname={{ abon.username }}" class="btn btn-success" title="{% trans 'Add new task' %}">
					                    <span class="glyphicon glyphicon-plus"></span>
                                        {% trans 'Add new task' %}
                                    </a>
                                {% else %}
                                    <a href="#" class="btn btn-success disabled" title="{% trans 'Permission denied' %}">
                                        <span class="glyphicon glyphicon-plus"></span>
                                        {% trans 'Add new task' %}
                                    </a>
                                {% endif %}

                                {% if perms.abonapp.view_passportinfo %}
                                    <a href="{% url 'abonapp:passport_view' group.pk abon.username %}" class="btn btn-default btn-modal">
                                        <span class="glyphicon glyphicon-paperclip"></span> {% trans 'Passport information' %}
                                    </a>
                                {% else %}
                                    <a href="#" class="btn btn-default" disabled title="{% trans 'Permission denied' %}">
                                        <span class="glyphicon glyphicon-paperclip"></span> {% trans 'Passport information' %}
                                    </a>
                                {% endif %}

                                {% if perms.abonapp.delete_abon %}
                                    <a href="{% url 'abonapp:del_abon' group.pk abon.username %}" class="btn btn-danger btn-modal" title="{% trans 'Remove subscriber' %}" data-toggle="tooltip">
                                        <span class="glyphicon glyphicon-remove"></span>
                                        <span>{% trans 'Remove subscriber' %}</span>
                                    </a>
                                {% endif %}

                                <a href="{% url 'docsapp:simple_list' abon.username %}" class="btn btn-default btn-modal">
                                    <span class="glyphicon glyphicon-print"></span> {% trans 'Document list' %}
                                </a>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-xs-12 col-md-6">
            {% if perms.abonapp.change_abon %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        {% if device %}
                            {% trans 'Device' %}
                        {% else %}
                            {% trans 'Select the device' %}
                        {% endif %}
                    </h3>
                </div>

                <div class="panel-body">
                    <form class="form-horizontal" action="{% url 'abonapp:save_user_dev_port' group.pk abon.username %}" method="post">{% csrf_token %}

                        <div class="form-group-sm">
                        <label for="id_method" class="col-sm-4 control-label">{% trans 'Device' %}</label>
                            <div class="col-sm-8 btn-group btn-group-sm">
                                {% if device %}
                                    <a href="{% url 'devapp:view' group.pk device.pk %}" class="btn btn-sm btn-default" title="{% trans 'Mac Address' %}: {{ device.mac_addr|default:_('Not assigned') }}">
                                        <span class="glyphicon glyphicon-hdd"></span>
                                        <span class="hidden-md">{{ device.comment|truncatechars:11 }} {{ device.ip_address|default:'' }}</span>
                                    </a>
                                    <a href="{% url 'abonapp:clear_dev' group.pk abon.username %}" class="btn btn-sm btn-danger">
					                    <span class="glyphicon glyphicon-remove-circle"></span> <span class="hidden-xs hidden-lg">{% trans 'Remove clutch' %}</span>
                                    </a>
                                {% else %}
                                    <a href="{% url 'abonapp:dev' group.pk abon.username %}" class="btn btn-success btn-sm btn-modal">
                                        <span class="glyphicon glyphicon-plus"></span> {% trans 'Add clutch' %}
                                    </a>
                                {% endif %}
                            </div>
                        </div>

                        {% if device %}
                        <div class="form-group-sm">
                            <label for="id_dev_port" class="col-sm-4 control-label">{% trans 'Device port' %}</label>
                            <div class="col-sm-8">
                                <select id="id_dev_port" class="form-control" name="user_port">
                                    <option value="0">{% trans 'Not assigned' %}</option>
                                    {% for port in dev_ports %}
                                        {% if port == abon.dev_port %}
					                        <option value="{{ port.pk }}" selected>{{ port.num }}: {{ port.descr }}</option>
                                        {% else %}
                                            <option value="{{ port.pk }}">{{ port.num }}: {{ port.descr }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group-sm">
                            <div class="col-sm-offset-4 col-sm-8 checkbox">
                                <label>
                                    <input type="checkbox" name="is_dynamic_ip"{% if abon.is_dynamic_ip %} checked{% endif %}> {% trans 'Is dynamic network settings' %}
                                </label>
                            </div>
                        </div>
                        <div class="form-group-sm">
                            <div class="col-sm-8 col-sm-offset-4">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-floppy-disk"></span> {% trans 'Save' %}
			                    </button>
			                </div>
                        </div>
                        {% endif %}
                    </form>
                </div>
            </div>
            {% endif %}

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans 'Ip address' %}</h3>
                </div>
                <div class="panel-body">
                    <dl class="dl-horizontal">
                    {% if abon.ip_address %}
                        <dt>{{ abon.ip_address }}</dt>
                        <dd>
                            <div class="btn-group btn-group-xs">
                                <a href="{% url 'abonapp:user_session_free' group.pk abon.username %}" class="btn btn-danger btn-modal" title="{% trans 'Free session' %}" data-toggle="tooltip">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </a>
                                {% if perms.abonapp.can_ping %}
                                    <a href="{% url 'abonapp:ping' group.pk abon.username %}" class="btn btn-default btn-cmd" title="Ping" data-param="{{ abon.ip_address }}">
                                        <span class="glyphicon glyphicon-flash"></span> Ping
                                    </a>
                                {% else %}
                                    <a href="#" class="btn btn-default disabled" title="{% trans 'Permission denied' %}">
                                        <span class="glyphicon glyphicon-flash"></span> Ping
                                    </a>
                                {% endif %}
                            </div>
                        </dd>
                    {% else %}
                        <dt><span class="glyphicon glyphicon-warning-sign text-danger"></span></dt>
                        <dd><span class="text-info">{% trans 'No ip address' %}</span></dd>
                    {% endif %}

                    {% if abon.statcache %}
                        <dt>{% trans 'Last traffic:' %}</dt>
                        <dd>
                            {% if abon.statcache.is_today %}
                                {{ abon.statcache.last_time|date:"H:i" }}
                            {% else %}
                                {{ abon.statcache.last_time|date:"d b Y H:i D" }}
                            {% endif %}
                        </dd>
                        <dt>{% trans 'Octets:' %}</dt>
                        <dd>{{ abon.statcache.octets_to|floatformat:2 }}Mb / 1 min.</dd>
                        <dt>{% trans 'Packets:' %}</dt>
                        <dd>{{ abon.statcache.packets }}</dd>
                    {% endif %}
                    </dl>

                </div>
                <div class="panel-footer">
                    <div class="btn-group btn-group-sm">
                        {% if abon.ip_address %}
                            <a href="{% url 'abonapp:update_ip' group.pk abon.username %}" class="btn btn-primary btn-modal">
                                <span class="glyphicon glyphicon-edit"></span>
                                <span class="hidden-xs">{% trans 'Change' %}</span>
                            </a>
                        {% else %}
                            <a href="{% url 'abonapp:update_ip' group.pk abon.username %}" class="btn btn-success btn-modal">
                                <span class="glyphicon glyphicon-plus"></span>
                                <span class="hidden-xs">{% trans 'Add' %}</span>
                            </a>
                        {% endif %}
                        <a href="{% url 'abonapp:active_nets' group.pk %}" class="btn btn-default btn-modal">
                            <span class="glyphicon glyphicon-globe"></span>
                            <span class="hidden-sm hidden-xs">{% trans 'Networks' %}</span>
                        </a>
                   </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans 'User flags' %}</h3>
                </div>
                <div class="panel-body">
                    {% for user_icon in abon.get_flag_icons %}
                    <span class="m-icon {{ user_icon }}"></span>
                    {% endfor %}
                </div>
                <div class="panel-footer">
                    <div class="btn-group">
                        <a href="{% url 'abonapp:markers_edit' group.pk abon.username %}" class="btn btn-default btn-modal">
                            <span class="glyphicon glyphicon-edit"></span> {% trans 'Edit' %}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}