{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load horizon %}
{% load custom_filters %}
{% block title %}{% trans "Components" %}{% endblock %}

{% block page_header %}
    {% include "services/_page_header.html" %}
{% endblock page_header %}
{% block main %}
    <input type="hidden" id="environmentId" value="{{ environment_id }}">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            {{ tab_group.render }}
        </div>
    </div>
{% endblock %}

{% block css %}
    {% include "_stylesheets.html" %}
    <link rel="stylesheet"
          href="{% static 'muranodashboard/css/catalog.css' %}"/>
    <link rel="stylesheet"
          href="{% static 'muranodashboard/css/components.css' %}">
{% endblock %}

{% block js %}
    {% include 'horizon/_scripts.html' %}
    <script src="{% static 'muranodashboard/js/load-modals.js' %}"></script>
    <script type="text/template" id="app_tile_small">
        {% jstemplate %}
            {% url 'horizon:murano:catalog:images' '[[app_id]]' as image_url %}
            {% url 'horizon:murano:catalog:add' '[[app_id]]' '[[environment_id]]' 'True' 'True' as add_url %}
            <div class="col-xs-2 draggable_app">
                <div class="well well-sm" draggable="true">
                    <img class="centering" src="{{ image_url|unquote }}"
                         height="50" width="50" draggable="false"/>
                    <input type="hidden" value="{{ add_url|unquote }}"/>

                    <div class="centering may_overflow">[[app_name]]</div>

                </div>
                <img class="ribbon" src="{% static 'muranodashboard/images/shared-sm.png' %}">
            </div>
            </div>
        {% endjstemplate %}
    </script>
    <script src="{% static 'muranodashboard/js/draggable-components.js' %}"></script>
    <script src="{% static 'muranodashboard/js/horizon.tables+reload.js' %}"></script>
    <script type="text/javascript">
        var tenant_id = "{{tenant_id}}"
    </script>
{% endblock %}