{% extends 'murano_base.html' %}
{% load i18n %}
{% load static %}
{% load compress %}

{% block title %}{% trans "Browse" %}{% endblock %}

{% block css %}
  {{ block.super }}
  {% compress css %}
    <link rel="stylesheet" href="{% static 'muranodashboard/css/catalog.css' %}">
    <link rel="stylesheet" href="{% static 'horizon/lib/font_awesome/css/font-awesome.min.css' %}">
  {% endcompress %}
{% endblock %}

{% block page_header %}
    {% include "horizon/common/_page_header.html" with title=_("Browse") %}
{% endblock page_header %}

{% block main %}
    <div class="table_wrapper">
        <h3 class="quota-heading">{% trans 'Recent Activity' %}</h3>
        {% if latest_list|length > 0 %}
            <div class="app-row app-list">
                {% for app in latest_list %}
                    {% include 'catalog/app_tile.html' %}
                {% endfor %}
            </div>
        {% else %}
            <p class="alert alert-info">{% trans "No recent activity to report at this time." %}</p>
        {% endif %}

        <div class="table_header catalog col-xs-12 col-sm-12 col-md-12 col-lg-12 col-row clearfix">
            <div class="table_actions clearfix">
                <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 col-row">
                    <h3 class="heading_switcher">{% trans 'App Category:' %}
                        <div class="header dropdown">
                            <a href="#"
                               class="btn btn-sm btn-default dropdown-toggle"
                               data-toggle="dropdown">
                                {{ current_category|truncatechars:30 }} <b
                                    class="caret"></b></a>
                            <ul class="dropdown-menu row_actions clearfix scrollable-menu">
                                <li class="clearfix">
                                    <a tabindex="-1" href="{% url 'horizon:murano:catalog:index' %}?category={{ ALL_CATEGORY_NAME|urlencode }}" class="btn btn-small">
                                        {{ ALL_CATEGORY_NAME }}</a>
                                </li>
                            {% for category in categories %}
                                <li class="clearfix">
                                    <a tabindex="-1" href="{% url 'horizon:murano:catalog:index' %}?category={{ category.name|urlencode }}" class="btn btn-small">
                                        {{ category.name }}
                                        {% if not MURANO_USE_GLARE %}
                                            ({{category.package_count}})
                                        {% endif %}
                                        </a>
                                </li>
                            {% endfor %}
                            </ul>
                        </div>
                    </h3>

                </div>

                <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 col-row">
                    {% include 'catalog/env_switcher.html' %}
                </div>

                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-row">
                    <div class="table_search client pull-right">
                        <form class="search" method="GET"
                              action="{% url 'horizon:murano:catalog:index' %}">
                            <div class="form-group has-feedback">
                                <input class="form-control"
                                       value="{{ search }}" type="text"
                                       name="search" placeholder="{% trans 'Filter' %}">
                                <span class="fa fa-search form-control-feedback search-icon"></span>
                            </div>
                            <div class="form-group">
                                <button type="submit"
                                        class="btn btn-default btn-sm"
                                        id="apps__action_filter">{% trans "Filter" %}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        {% if object_list|length > 0 %}
            <div class="app-row app-list">
                {% for app in object_list %}
                    {% include 'catalog/app_tile.html' %}
                {% endfor %}
            </div>
            <div class="col-row col-xs-12">
                <div class="btn-toolbar centering">
                    <div class="btn-group">
                        {% if view.has_prev_page %}
                            <a class="btn btn-default"
                               href="{{ view.prev_page_url }}">{% trans "Previous Page" %}</a>
                        {% endif %}
                        {% if view.has_next_page %}
                            <a class="btn btn-default"
                               href="{{ view.next_page_url }}">{% trans "Next Page" %}</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% else %}
            <p class="col-xs-12 alert alert-info">
            {% if no_apps %}
            {% blocktrans trimmed %}There are no applications in the catalog. You can import apps from
                <a href="{{ repo_url }}" target="_blank"> {{ repo_url }}</a>.{% endblocktrans %}
                <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 %}
            {% else %}
                {% trans "There are no applications matching your criteria." %}
            {% endif %}
            </p>
        {% endif %}
    </div>
    <script>
        $('.description h4').each(function () {
            $(this).bind('mouseenter', function () {
                var $this = $(this);

                if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                    $this.attr('title', $this.text());
                }
            });
        });
    </script>
{% endblock %}