{% extends "hobo/base.html" %}
{% load i18n service %}

{% block breadcrumb %}
  {{ block.super }}
  <a href="{% url 'environment-home' %}">{% trans 'Sites' %}</a>
{% endblock %}

{% block appbar %}
  <h2>{% trans 'Sites' %}</h2>
{% endblock %}

{% block content %}

  <p>
    <span>{% trans 'Add new service:' %}</span>
    <span id="new-service">
      {% for service in available_services %}
        <a rel="popup" data-service="{{ service.id }}" href="{% url 'create-service' service=service.id %}">{{ service.label }}</a>
      {% endfor %}
    </span>
  </p>

  {% for service in installed_services %}
    <div data-service-id="{{ service.Extra.service_id }}"
      data-slug="{{ service.slug }}"
      class="bo-block service-block {{ service.Extra.service_id }}-block"
      {% if service.wants_frequent_checks %}data-wants-check="true"{% endif %}>
      <h3>{{ service.title }} <span class="slug">[{{service.slug}},
        <a href="{{service.base_url}}">{{service.base_url}}</a>]</span></h3>
      {% if not service.is_operational %}
        {% if service.wants_frequent_checks %}
          <p class="info being-deployed">
            {% trans 'This service is still being deployed.' %}
          </p>
        {% else %}
          <p class="warning">
            {% trans 'This service is not operational.' %}
            <a rel="popup" class="icon-remove-sign" href="{% url 'delete-service' service=service.Extra.service_id slug=service.slug %}" title="{% trans 'Delete service' %}"></a>
          </p>
        {% endif %}
      {% endif %}
      <form class="small" method="post" action=" {{ service|save_url }}" >
        {% csrf_token %}
        {{ service|as_update_form }}
        <button class="enable-on-change" disabled="disabled">{% trans 'Save' %}</button>

        <h4 class="custom-variables untoggled">{% trans "Custom variables" %}</h4>
        <div>
          {% for variable in service.variables.all %}
            {% if not variable.auto %}
              <p class="variable">
                <label data-variable-id="{{ variable.id }}">{{ variable.get_field_label }}</label>
                <input type="text" size="80" value="{{ variable.value }}" readonly>
                <a rel="popup" class="update-variable" href="{% url 'update-variable' pk=variable.id %}" title="{% trans 'Update variable' %}">{% trans 'edit' %}</a>
                <a rel="popup" class="icon-remove-sign" href="{% url 'delete-variable' pk=variable.id %}" title="{% trans 'Delete variable' %}"></a>
              </p>
            {% endif %}
          {% endfor %}
          <a rel="popup" class="button" href="{% url 'new-variable-service' service=service.Extra.service_id slug=service.slug %}">{% trans 'Add new variable' %}</a>
        </div>
      </form>
      {% if service.legacy_urls %}
        <h4>
          {% blocktrans trimmed count counter=service.legacy_urls|length %}
            Legacy URL
          {% plural%}
            Legacy URLS
          {% endblocktrans %}
        </h4>
        <ul>
          {% for legacy_url in service.legacy_urls %}
            <li>{{ legacy_url.base_url }} {% if legacy_url.datetime %}({% trans 'until' %} {{ legacy_url.datetime }}){% endif %}</li>
          {% endfor %}
        </ul>
      {% endif%}
    </div>
  {% endfor %}

{% endblock %}


{% block page-end %}
  <script>
    jQuery.fn.extend({
      operational_check: function() {
        return this.each(function() {
          var div = $(this)
          var p_info = $(div).find('p.info');
          var url = 'check_operational/' + $(div).data('service-id') + '/' + $(div).data('slug');
          $.getJSON(url, function(data) {
            if (data.operational == true) {
              $(p_info).hide('size');
            } else {
              setTimeout(function() { $(div).operational_check(); }, 10000);
            }
          });
        });
      }
    });

    $(function() {
      /* turn the new service links into a select box */
      var select_new_service = $('<select><option></option></select>').insertAfter($('#new-service'));
      $('#new-service').hide();
      $('#new-service a').each(function(index, element) {
        var text = $(element).text();
        var option = $('<option value="' + $(element).data('service') + '">' + text + "</option>"
        ).appendTo(select_new_service);
      });
      $(select_new_service).change(function() {
        var service_id = $(this).val();
        if (service_id) {
          $('#new-service a[data-service=' + service_id + ']').click();
          $(this).val('');
        }
      });

      $('a.update-variable').hide();
      $('p.variable label, p.variable input').click(function() {
        $(this).parent().find('a.update-variable').click();
      });

      $("div[data-wants-check='true']").each(function(index, element) {
        $(element).operational_check();
      });

      $('button.enable-on-change').each(function(index, element) {
        var button = $(element);
        $(element).parent('form').find('input').on('change keydown',
          function() { $(button).prop('disabled', null); });
      });
    });
  </script>
{% endblock %}