{% load i18n %}
{% load custom_filters %}
{% load jsonify %}

{% block table_caption %}
    {% with apps=table.get_apps_list %}
        {% if apps %}
            <div class="col-xs-5">
                <h3 class="table_title extra_title table_title">
                    {% trans "Application&nbsp;Components" %}</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">{% trans "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="#">{% trans "All" %}</a>
                                </li>
                            {% for category in categories %}
                                <li role="presentation"><a
                                        role="menuitem" tabindex="-1"
                                        data-category-name="{{ category.name }}"
                                        href="#">{{ category.name }}
                                        {% if not MURANO_USE_GLARE %}
                                            ({{category.package_count}})
                                        {% endif %}
                                        </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={% trans "Find in a selected category" %}>
                    <span class="fa fa-search form-control-feedback search-icon"></span>
                </div>
            </div>
        {% else %}
            <p id="no_apps_in_catalog_message" class="col-xs-12 alert alert-info ">
                {% with repo_url=table.get_repo_url pkg_def_url=table.get_pkg_def_url %}
                    {% trans "There are no applications in the catalog. You can import apps from" %}
                        <a href="{{ repo_url }}" target="_blank"> {{ repo_url }}</a>.
                        <br><br>
                        {% blocktrans trimmed %}Go to
                        <b>
                            <a href={{ pkg_def_url }}>Packages</a>
                        </b>, click 'Import Package' and select <i>Repository</i> as <i>Package Source</i>.
                        {% endblocktrans %}
                {% endwith %}
            </p>
        {% endif %}

        <div class="clearfix"></div>
        <p id="no_apps_found_message" class="alert alert-info">
            {% trans "There are no applications matching your criteria." %}</p>
        <div id="apps_carousel" class="carousel">
            <input type="hidden" id="apps_carousel_contents"
                   value="{{ apps|jsonify }}">

            <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>
    {% endwith %}
{% 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 %}
{% endblock table_body %}