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

{% 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' dev.group.pk %}">{{ dev.group.title }}</a></li>
        <li><a href="{% url 'devapp:view' dev.group.pk dev.pk %}">{{ dev.comment }}</a></li>
        <li class="active">{% trans 'Add ports' %}</li>
    </ol>
{% endblock %}

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

{% block main %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{{ dev.comment }}</h3>
        </div>
        <div class="panel-body">

            <form class="table-responsive" role="form" action="{% url 'devapp:add_ports' dev.group.pk dev.pk %}" method="post">{% csrf_token %}
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th width="10">#</th>
                    <th>№</th>
                    <th>{% trans 'Mode' %}</th>
                    <th>{% trans 'Description' %}</th>
                </tr>
                </thead>
                <tbody>
                {% with gid=dev.group.pk did=dev.pk can_del_port=perms.devapp.delete_port %}
                    {% for port in ports %}
                        <tr>
                        <td>{% if port.status %}
                            <span class="glyphicon glyphicon-ok text-success"></span>
                            {% else %}
                            <span class="glyphicon glyphicon-warning-sign text-danger"></span>
                            {% endif %}</td>
                        <td>{{ port.pid }}</td>
                        <td>{{ port.mode }}</td>
                        <td class="input-group">
                            <input type="text" class="form-control input-sm" name="p_text" value="{{ port.text|default_if_none:'' }}" placeholder="{{ port.placeholder|default_if_none:'' }}">
                            <input type="hidden" name="pids" value="{{ port.pid }}">
                            <span class="input-group-btn">
                                {% if port.from_db %}
                                    {% if can_del_port %}
                                        <a href="{% url 'devapp:del_port' gid did port.pk %}" class="btn btn-sm btn-danger btn-modal" title="{% trans 'Delete' %}">
                                    {% else %}
                                        <a href="#" class="btn btn-danger btn-sm disabled" title="{% trans 'Delete' %}">
                                    {% endif %}
                                            <span class="glyphicon glyphicon-remove"></span>
                                        </a>
                                {% else %}
                                    <a href="{% url 'devapp:add_port' gid did %}?n={{ port.pid }}&t={{ port.text }}" class="btn btn-sm btn-success btn-modal" title="{% trans 'Add' %}">
                                        <span class="glyphicon glyphicon-plus"></span>
                                    </a>
                                {% endif %}
                            </span>
                        </td>
                        </tr>
                    {% endfor %}
                {% endwith %}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="btn-group">
                            {% if perms.devapp.add_port and ports %}
                                <button type="submit" class="btn btn-primary">
                                    <span class="glyphicon glyphicon-save"></span> {% trans 'Save' %}
                                </button>
			                {% else %}
			                    <button type="button" class="btn btn-primary" disabled>
                                    <span class="glyphicon glyphicon-save"></span> {% trans 'Save' %}
				                </button>
                            {% endif %}
                        </td>
                    </tr>
                </tfoot>
            </table>
            </form>
        </div>
    </div>

{% endblock %}