{% extends "infrastructure/base.html" %}
{% load i18n %}
{% load url from future %}
{% block title %}{% trans "Service Configuration" %}{% endblock %}

{% block page_header %}
  {% include 'horizon/common/_items_count_domain_page_header.html' with title=_('Service Configuration') %}
{% endblock %}

{% block main %}
  <div class="row">
    <form class="form-horizontal">
      {% include 'horizon/common/_form_errors.html' with form=form %}
      <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked nav-arrow" role="tablist">
          <li class="active"><a href="#global" role="tab" data-toggle="tab">{% trans "Global" %}</a></li>
          <li><a href="#controller" role="tab" data-toggle="tab">{% trans "Controller" %}</a></li>
          <li><a href="#compute" role="tab" data-toggle="tab">{% trans "Compute" %}</a></li>
          <li><a href="#block-storage" role="tab" data-toggle="tab">{% trans "Block Storage" %}</a></li>
          <li><a href="#object-storage" role="tab" data-toggle="tab">{% trans "Object Storage" %}</a></li>
          <li><a href="#ceph-storage" role="tab" data-toggle="tab">{% trans "Ceph Storage" %}</a></li>
        </ul>
      </div>
      <div class="col-md-10">
        <div class="tab-content panel panel-default configuration-panel">
          <div class="tab-pane active" id="global">
            {% for field in form.global_fieldset %}
              {% include 'horizon/common/_horizontal_field.html' with field=field %}
            {% endfor %}
          </div>
          <div class="tab-pane" id="controller">
            {% for field in form.controller_fieldset %}
              {% include 'horizon/common/_horizontal_field.html' with field=field %}
            {% endfor %}
          </div>
          <div class="tab-pane" id="compute">
            {% for field in form.compute_fieldset %}
              {% include 'horizon/common/_horizontal_field.html' with field=field %}
            {% endfor %}
          </div>
          <div class="tab-pane" id="block-storage">
            {% for field in form.block_storage_fieldset %}
              {% include 'horizon/common/_horizontal_field.html' with field=field %}
            {% endfor %}
          </div>
          <div class="tab-pane" id="object-storage">
            {% for field in form.object_storage_fieldset %}
              {% include 'horizon/common/_horizontal_field.html' with field=field %}
            {% endfor %}
          </div>
          <div class="tab-pane" id="ceph-storage">
            {% for field in form.ceph_storage_fieldset %}
              {% include 'horizon/common/_horizontal_field.html' with field=field %}
            {% endfor %}
          </div>
        </div>
      </div>
    </form>
  </div>

  <script type="text/javascript">
    (window.$ || window.addHorizonLoadEvent)(function () {
        $(document).tooltip('hide'); // prevent horizon from adding tooltip
        $('a.help-icon').click(function () {
            return false;
        }).popover({
            trigger: 'focus',
            placement: 'right'
        });
        $('a.password-button').popover({
            trigger: 'click',
            placement: 'right'
        });
    });
  </script>
{% endblock %}
