{% load i18n %}
<div class="form-horizontal"
    ng-controller="ProjectProtocolsController as protocol"
>
{% include 'horizon/common/_form_errors.html' with form=form %}

    {% for field in form.visible_fields %}
    {% if field.name in 'protocol_name' %}
      {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=3 field_width=9 %}
    {% endif %}
    {% endfor %}
    <div id='id_protocol_settings'>
      <span>
        <p>{% blocktrans %}Connection options{% endblocktrans %}</p>
      </span>
      <hr>
      <div id='id_rdp_protocol_settings'>

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDisplays" aria-expanded="true" aria-controls="collapseDisplays">
                  {% blocktrans %}Displays{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseDisplays" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'rdp_multi_monitors,rdp_full_screen' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDevices" aria-expanded="false" aria-controls="collapseDevices">
                  {% blocktrans %}Devices and audio{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseDevices" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'rdp_use_audio,rdp_use_microphone,rdp_use_printers,rdp_use_smartcards' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseLocalDrives" aria-expanded="false" aria-controls="collapseLocalDrives">
                  {% blocktrans %}Catalogs{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseLocalDrives" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'rdp_use_local_drives' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingFour">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseAdditional" aria-expanded="false" aria-controls="collapseAdditional">
                  {% blocktrans %}Additional{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseAdditional" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'rdp_use_clipboard,rdp_ldap_domain,rdp_use_rdp_gateway,rdp_rdp_gateway_host,rdp_rdp_gateway_credential' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

        </div>

      </div>

      <div id='id_spice_protocol_settings'>

        <div class="panel-group" id="spice-accordion" role="tablist" aria-multiselectable="true">

          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingSpiceDisplays">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#spice-accordion" href="#collapseSpiceDisplays" aria-expanded="true" aria-controls="collapseSpiceDisplays">
                  {% blocktrans %}Displays{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseSpiceDisplays" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingSpiceDisplays">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'spice_full_screen,spice_spice_preferred_compression' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingSpiceDevices">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#spice-accordion" href="#collapseSpiceDevices" aria-expanded="false" aria-controls="collapseSpiceDevices">
                  {% blocktrans %}Devices and audio{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseSpiceDevices" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSpiceDevices">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'spice_use_audio,spice_redirect_usb_device,spice_spice_smartcard' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingSpiceLocalDrives">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#spice-accordion" href="#collapseSpiceLocalDrives" aria-expanded="false" aria-controls="collapseSpiceLocalDrives">
                  {% blocktrans %}Catalogs{% endblocktrans %}
                </a>
              </h4>
            </div>
            <div id="collapseSpiceLocalDrives" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSpiceLocalDrives">
              <div class="panel-body">
              {% for field in form.visible_fields %}
                {% if field.name in 'spice_use_local_drives' %}
                  {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=6 field_width=6 %}
                {% endif %}
              {% endfor %}
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>
    <div id="id_additional_protocol_settings">
        {% for field in form.visible_fields %}
        {% if field.name in 'enabled_for_editings' %}
          {% include 'vdi/projects/_horizontal_field.html' with field=field label_width=9 field_width=3 %}
        {% endif %}
        {% endfor %}
    </div>
</div>