{% extends 'base.html' %}
{% with active_page="editor" %}

{% block title %}Editor{% endblock %}

{% block head %}
    {{ block.super }}
{% endblock %}

{% block body %}

{% if errors %}
<div class="container-fluid">
    <div class="alert alert-danger">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Errors:</strong> {{ errors }}
    </div>
</div>
{% endif %}


<!-- Start: Quality Models Editor -->
<div class="container-fluid">
  {% include "prosoul/editor_import.html" %}
  {% include "prosoul/editor_export.html" %}
  {% include "prosoul/editor_qmodel.html" %}
  {% include "prosoul/editor_qmodels.html" %}
</div>
<!-- End: Quality Models Editor -->


<!-- Start: Editor body -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <!-- Start: Goals block -->
      {% include "prosoul/editor_goal.html" %}
      {% include "prosoul/editor_goals.html" %}
    </div>
    <!-- End: Goals -->
    <!-- Start: Attributes block -->
    <div class="col-md-4">
      {% include "prosoul/editor_attribute.html" %}
      {% include "prosoul/editor_attributes.html" %}
    </div>
    <!-- End: Attributes -->
    <!-- Start: Metrics block -->
    <div class="col-md-4">
      {% include "prosoul/editor_metric_data.html" %}
      {% include "prosoul/editor_metric.html" %}
      {% include "prosoul/editor_metrics.html" %}
    </div>
    <!-- End: Metrics -->
  </div>
  <!-- End: Editor body -->
</div>

<script>

// Disable "onclick" event when selecting a qmodel to download it
qmodel_download_form = document.getElementById("qmodel_download");
qmodel_download_form["id"].removeAttribute("onclick");

// Disable element
function disableElement(element_id) {
    document.getElementById(element_id).disabled = true;
}

</script>

<!-- Element disabling control-->
{% if not qmodels_form.initial.id %}
    {% if qmodels_form.id|length == 1 %}
        <script>
        // If there are no qmodels, open `add` modal
        // qmodels length is 1 because of the empty option
          $('#addQualityModelModal').modal('show');
        </script>
    {% endif %}
    <script>
        disableElement("edit-qmodel-btn");
        disableElement("add-goal");
        disableElement("add-goal-btn");
        disableElement("edit-goal-btn");
        disableElement("select-goal");
        disableElement("add-attribute");
        disableElement("add-attribute-btn");
        disableElement("edit-attribute-btn");
        disableElement("select-attribute");
        disableElement("select-metric");
        disableElement("add-metric-btn");
        disableElement("edit-metric-btn");
        disableElement("add-metric-data-btn");
    </script>
{% elif not goals_form.initial.id %}
    {% if goals_form.id|length == 0 %}
        <script>
            disableElement("select-goal");
            // If there are no goals, open `add` modal
            $('#addGoalModal').modal('show');
        </script>
    {% endif %}
    <script>
      disableElement("edit-goal-btn");
      disableElement("add-attribute");
      disableElement("add-attribute-btn");
      disableElement("edit-attribute-btn");
      disableElement("select-attribute");
      disableElement("select-metric");
      disableElement("add-metric-btn");
      disableElement("edit-metric-btn");
      disableElement("add-metric-data-btn");
    </script>
{% elif not attributes_form.initial.id %}
    {% if attributes_form.id|length == 0 %}
        <script>
            disableElement("select-attribute");
            // If there are no attributes, open `add` modal
            $('#addAttributeModal').modal('show');
        </script>
    {% endif %}
    <script>
      disableElement("edit-attribute-btn");
      disableElement("select-metric");
      disableElement("add-metric-btn");
      disableElement("edit-metric-btn");
      disableElement("add-metric-data-btn");
    </script>
{% elif not metrics_form.initial.id %}
    {% if metrics_form.id|length == 0 %}
        <script>
            disableElement("select-metric");
            // If there are no metrics, open `add` modal
            $('#addMetricModal').modal('show');
        </script>
    {% endif %}
    <script>
      disableElement("edit-metric-btn");
      disableElement("add-metric-data-btn");
    </script>
{% endif %}
<!-- End of element disabling control-->

{% endblock %}
{% endwith %}
