{% extends "hobo/applications/home.html" %}
{% load i18n thumbnail static %}

{% block css %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" media="all" href="{% static "xstatic/select2.min.css" %}"/>
{% endblock %}

{% block extrascripts %}
  {{ block.super }}
  <script src="{% static "xstatic/select2.min.js" %}"></script>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'application-manifest' app_slug=app.slug %}">{{ app.name }}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2 class="application-title">
    {% if app.icon %}
      {% thumbnail app.icon '64x64' crop='center' format='PNG' as im %}
        <img src="{{ im.url }}" alt="" />
      {% endthumbnail %}
    {% endif %}
    {{ app.name }}
  </h2>
  <span class="actions">
    <a class="extra-actions-menu-opener"></a>
    {% if app.editable %}
      <a href="{% url 'application-metadata' app_slug=app.slug %}">{% trans 'Metadata' %}</a>
    {% else %}
      <a rel="popup" href="{% url 'application-update' app_slug=app.slug %}">{% trans 'Update' %}</a>
    {% endif %}
    <ul class="extra-actions-menu">
      <li><a href="{% url 'application-versions' app_slug=app.slug %}">{% trans 'See all versions' %}</a></li>
      {% if HOBO_APPLICATION_UNINSTALL_ENABLED %}
        <li><a rel="popup" href="{% url 'application-uninstall' slug=app.slug %}">{% trans 'Uninstall' %}</a></li>
      {% endif %}
      <li><a rel="popup" href="{% url 'application-delete' slug=app.slug %}">{% trans 'Delete' %}</a></li>
    </ul>
  </span>
{% endblock %}

{% block content %}

  {% if relations %}
    <div class="section padded">
      <label>
        {% trans "Filter label:" %}
        <input type="search" id="name-filter" value="{{ name_filter }}">
      </label>
      <label>
        {% trans "Filter type:" %}
        <select id="type-filter" multiple="multiple" name="types[]">
          {% for component_type, selected in component_types %}
            {% ifchanged component_type.service.title %}
              {% if forloop.counter0 > 1 %}</optgroup>{% endif %}
              <optgroup label="{{ component_type.service.title }}">
            {% endifchanged %}
            <option
              {% if selected %}selected{% endif %}
              value="{{ component_type.id }}"
            >
              {{ component_type.text }}
            </option>
          {% endfor %}
        </optgroup>
      </select>
    </label>
    </div>
  {% endif %}

  <ul id="application-content" class="objects-list single-links application-content">
    {% for relation in relations %}
      <li data-slugged-text="{{ relation.element.name|slugify }}" data-type="{{ relation.element.type }}" {% if relation.auto_dependency %}class="auto-dependency"{% endif %}>
        <a {% if relation.element.get_redirect_url %}href="{{ relation.element.get_redirect_url }}"{% endif %}>
          {% if relation.error %}<span class="tag tag-error">{{ relation.get_error_status_display }}</span>{% endif %}
          {{ relation.element.name }} <span class="extra-info">- {{ relation.element.type_label }}</span>
        </a>
        {% if app.editable and not relation.auto_dependency %}<a rel="popup" class="link-action delete" href="{% url 'application-delete-element' app_slug=app.slug pk=relation.id %}"><span class="sr-only">{% trans "remove" %}</span></a>{% endif %}
        {% if app.editable and relation.auto_dependency and relation.has_origins %}<a rel="popup" data-selector=".popup-origins" class="link-action link-action-icon origins" href="{% url 'application-element-origins' app_slug=app.slug pk=relation.id %}"><span class="sr-only">{% trans "see origins" %}</span></a>{% endif %}
        {% if app.editable and relation.element.has_config_options %}
          <a rel="popup" class="link-action link-action-icon config{% if relation.element.is_config_options_not_default %} marker{% endif %}" href="{% url 'application-element-config' app_slug=app.slug pk=relation.id %}"><span class="sr-only">{% trans "configure" %}</span></a>
        {% endif %}
      </li>
    {% endfor %}
  </ul>

  {% if relations %}
    <div class="buttons">
      {% if app.editable %}
        <a class="link-action pk-button" href="{% url 'application-scandeps' app_slug=app.slug %}">{% trans "Scan dependencies" %}</a>
        &nbsp; &nbsp;
        <a class="link-action pk-button" rel="popup" href="{% url 'application-generate' app_slug=app.slug %}">{% trans "Generate application bundle" %}</a>
      {% endif %}
      {% if last_version and last_version.bundle %}
        {% if app.editable %}&nbsp; &nbsp;{% endif %}
        <a class="pk-button" download href="{% url 'application-download' app_slug=app.slug number=last_version.number %}">{% blocktrans with number=last_version.number %}Download latest deployed version ({{ number }}){% endblocktrans %}</a>
      {% endif %}
    </div>
  {% else %}
    <div id="application-empty">
      <div class="infonotice">
        <p>{% trans "You should now assemble the different parts of your application." %}</p>
      </div>
    </div>
  {% endif %}

{% endblock %}

{% block sidebar %}
  <aside id="sidebar">
    {% if not app.editable %}
      <div class="meta">
        {% if app.description %}<p class="description">{{ app.description }}</p>{% endif %}
        {% if app.documentation_url %}<p class="documentation"><a href="{{ app.documentation_url }}">{% trans "Documentation" %}</a></p>{% endif %}
        {% if app.authors %}<p class="authors">{% trans "Created by:" %} {{ app.authors|linebreaksbr }}</p>{% endif %}
        {% if app.license %}<p class="license">{% trans "License:" %} {{ app.get_license_display }}</p>{% endif %}
      </div>
    {% endif %}
    {% if app.editable %}
      <h3>{% trans "Add" %}</h3>
      {% for service, types in types_by_service.items %}
        <h4>{{ service }}</h4>
        {% for type in types %}
          <a class="button button-paragraph" rel="popup" href="{% url 'application-add-element' app_slug=app.slug type=type.id %}">{{ type.text }}</a>
        {% endfor %}
      {% endfor %}
    {% endif %}
    {% with has_parameters=app.parameter_set.exists parameters_qs=app.parameter_set.all %}
      {% if app.editable or has_parameters %}
        <div class="app-parameters--section">
          <h3>{% trans "Parameters" %}
            {% if app.editable %}
              <a rel="popup" href="{% url 'application-add-parameter' app_slug=app.slug %}">({% trans "add" %})</a>
            {% endif %}
          </h3>
          {% if app.editable and has_parameters %}
            <ul class="objects-list single-links app-parameters--list">
              {% for parameter in parameters_qs %}
                <li><a rel="popup" href="{% url 'application-edit-parameter' app_slug=app.slug pk=parameter.id %}">{{ parameter.label }}</a>
                  <a rel="popup" class="delete" href="{% url 'application-delete-parameter' app_slug=app.slug pk=parameter.id %}"><span class="sr-only">{% trans "remove" %}</span></a>
                </li>
              {% endfor %}
            </ul>
          {% elif app.editable %}
            <p>{% trans "No parameters defined." %}</p>
          {% endif %}
          {% if has_parameters %}
            <div class="app-parameters--values">
              {% for parameter in parameters_qs %}
                <p>
                  <label>{{ parameter.label }}</label>
                  {{ parameter.variable.value|default:"-" }}
                  (<a rel="popup" href="{% url 'application-change-parameter-value' app_slug=app.slug name=parameter.variable.name %}">{% trans 'change' %}</a>)
                </p>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      {% endif %}
    {% endwith %}
  </aside>
  <script>
    function filter_content() {
      const raw_name_val = document.getElementById('name-filter').value;
      const name_val = window.URLify(raw_name_val);
      const selected_types = $('#type-filter').val();

      // forge new URL params to preserve filters
      var new_params = '?'
      if(name_val) { new_params += 'name-filter='+encodeURI(name_val); }
      if(selected_types) { new_params += (name_val?'&':'') + 'type-filter=' + encodeURI(selected_types); }
      if(new_params == '?') {
        history.replaceState({}, "", ".")
      } else {
        history.replaceState({}, "", new_params)
      }
      Array.from(document.getElementsByClassName('link-action')).forEach(function(anchor) {
        var url = new URL(anchor.href);
        url.search = new_params;
        anchor.href = url;
      })

      // applying filters
      const app_content = Array.from(
        document.getElementById('application-content').getElementsByTagName('li')
      ).forEach(function(li_elt) {
        const slug_name = li_elt.dataset['sluggedText'];
        const type = li_elt.dataset['type'];

        var show = false;
        if(selected_types.length == 0) {
          show = true;
        } else {
          selected_types.forEach(function(type_id) {
            if(type_id == type) { show= true; }
          });
        }
        if(show && name_val && slug_name.indexOf(name_val) <= -1) {
          show = false;
        }

        if(show) {
          li_elt.style.display = '';
        } else {
          li_elt.style.display = 'none';
        }
      });
    }

    $(document).ready(function() {
      $('#type-filter').select2();
      $('#name-filter').on('change blur keyup', filter_content);
      $('#type-filter').on('change', filter_content);
      filter_content();
    });

  </script>
{% endblock %}