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

{% block appbar %}
  {% if service %}
    <h2>{% blocktrans with name=service.name %}Variables for {{ name }}{% endblocktrans %} <small>[{{ service.slug }}, <a href="{{ service.base_url }}">{{ service.base_url }}</a>]</small></h2>
  {% else %}
    <h2>{% trans 'Variables' %}</h2>
  {% endif %}
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  {% if service %}
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page" href="{% url 'edit-variable-service' service=service.Extra.service_id slug=service.slug %}">{% trans 'Variables for' %} {{ service.name }} ({{ service.slug }})</a>
    </li>
  {% else %}
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page" href="{% url 'environment-variables' %}">{% trans 'Variables' %}</a>
    </li>
  {% endif %}
{% endblock %}

{% block content %}
  <form class="small">
    {% for variable in variables %}
      <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>
    {% endfor %}
    {% if service %}
      <a rel="popup" class="button" href="{% url 'new-variable-service' service=service.Extra.service_id slug=service.slug %}">{% trans 'Add new variable' %}</a>
    {% else %}
      <a rel="popup" class="button" href="{% url 'new-variable' %}">{% trans 'Add new variable' %}</a>
    {% endif %}
  </form>

{% endblock %}


{% block page-end %}
  <script>
    $(function() {
      $('a.update-variable').hide();
      $('p.variable label, p.variable input').click(function() {
        $(this).parent().find('a.update-variable').click();
      });

      $('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 %}