{% extends 'common/_data_table.html' %}
{% load i18n %}
{% load custom_filters %}
{% block title %}{% trans "Components" %}{% endblock %}

{% block table_caption %}
    {% with apps=table.get_apps_list %}
        {% if table.actions_allowed %}
            {% comment %}
              Note(efedorova): We are comparing to the string, since get_apps_list
              functions returns json.dumps, witch is used in js later.
              So to prevent extra transformations comparing to the string is used
              to check for app absence.
            {% endcomment %}
            {% if apps != '[]' %}
                <div class="row row-header">
                    <div class="col-xs-5">
                        <h3 class="table_title extra_title table_title">
                            {% blocktrans %}Application&nbsp;Components{% endblocktrans %}</h3>
                    </div>
                    <h4 class="category-title">{% trans 'App category' %}</h4>
                    <div class="col-xs-3">
                        <div class="dropdown" id="envAppsCategory">
                            {% with categories=table.get_categories_list %}
                                <button class="btn btn-default dropdown-toggle"
                                        type="button"
                                        data-toggle="dropdown"
                                        data-disabled="true"
                                        aria-expanded="false"
                                        id="envAppsCategoryBtn">
                                        <span id="envAppsCategoryName">All</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu scrollable-menu"
                                    role="menu"
                                    aria-labelledby="envAppsCategoryBtn">
                                        <li role="presentation"><a
                                                role="menuitem" tabindex="-1"
                                                data-category-name="All"
                                                href="#">All</a>
                                        </li>
                                    {% for category in categories %}
                                        <li role="presentation"><a
                                                role="menuitem" tabindex="-1"
                                                data-category-name="{{ category.name }}"
                                                href="#">{{ category.name }} ({{category.package_count}})</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endwith %}
                        </div>
                    </div>

                    <div class="col-xs-3 filter-bar">
                        <div class="has-feedback" id="envAppsFilter">
                            <input class="form-control" value="{{ search }}"
                                   type="text"
                                   placeholder="Find in a selected category">
                            <span class="fa fa-search form-control-feedback search-icon"></span>
                        </div>
                    </div>
                </div>
            {% else %}
                <p id="no_apps_in_catalog_message" class="col-xs-12 alert alert-info ">
                    {% blocktrans %} There are no applications in the catalog.
                        You can import apps from<a href="{{ repo_url }}"
                                                   target="_blank"> {{ repo_url }}</a>
                        .
                        <br><br>
                        Go to
                        <b><a href={{ pkg_def_url }}>Package
                            Definitions</a></b>,
                        click 'Import Package' and select <i>Repository</i> as
                        a <i>Package Source</i>.  {% endblocktrans %}
                </p>
            {% endif %}

            <div class="clearfix"></div>
            <p id="no_apps_found_message" class="alert alert-info">No applications matching your criteria</p>
            <div id="apps_carousel" class="carousel">
                <input type="hidden" id="apps_carousel_contents"
                       value="{{ apps }}">

                <div class="carousel-inner"></div>
                <a class="left carousel-control" ng-non-bindable href="#apps_carousel"
                   data-slide="prev">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <a class="right carousel-control" ng-non-bindable href="#apps_carousel"
                   data-slide="next">
                    <i class="fa fa-chevron-right"></i>
                </a>
            </div>
        {% endif %}


    {% endwith %}
    <tr class='table_caption'>
        <th class='table_header' colspan='{{ columns|length }}'>
            <h3 class='table_title'>{{ table }}</h3>
            {{ table.render_table_actions }}
        </th>
    </tr>
{% endblock table_caption %}

{% block table_body %}
    {% if table.actions_allowed %}
        <div class="drop_component">
            <h4 class="centering">
                <i class="fa fa-bullseye"></i> {% trans 'Drop Components here' %}
            </h4>
        </div>
    {% endif %}
  <tbody>
  {% for row in rows %}
    {{ row.render }}
    {% empty %}
    <tr class="{% cycle 'odd' 'even' %} empty">
      <td colspan="{{ table.get_columns|length }}">{{ table.get_empty_message }}</td>
    </tr>
  {% endfor %}
  </tbody>
{% endblock table_body %}
