{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% block meta_title %}{{ 'Knowledge Base Categories'|trans }}{% endblock %}

{% block body_class %}kb-index{% endblock %}
{% block breadcrumb %}
  <li class="breadcrumb-item">
    <a href="{{ 'support/kb'|link }}">{{ 'Knowledge Base'|trans }}</a>
  </li>
  {% if request.q %}
  	<li class="breadcrumb-item active" aria-current="page">{{ request.q }}</li>
  {% else %}
  	<li class="breadcrumb-item active" aria-current="page">{{ 'Category List'|trans }}</li>
  {% endif %}
{% endblock %}

{% block content %}
    {% if request.q %}
        {% set kbcategories = guest.support_kb_category_get_list({ "q": request.q }) %}
    {% else %}
        {% set kbcategories = guest.support_kb_category_get_list %}
    {% endif %}

    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header py-3 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="mb-1">{{ 'Categories'|trans }}</h1>
                            <span class="small text-muted">{{ 'Explore our knowledge base categories and their associated articles below.'|trans }}</span>
                        </div>
                        <form method="get" action="" class="form-inline">
                            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                            <input name="_url" type="hidden" value="/support/kb">
                            <div class="input-group">
                                <input class="form-control" name="q" type="text" value="{{ request.q }}" placeholder="{{ 'What are you looking for?'|trans }}">
                                <button class="btn btn-outline-secondary" type="submit">
                                    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
                                    </svg>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="card-body">
                {% for row in kbcategories.list|batch(3) %}
                    <div class="row mb-2">
                        {% for i, category in row %}
                            <div class="col">
                                <a href="{{ 'support/kb'|link }}/{{ category.slug }}" class="card link-underline link-underline-opacity-0" style="min-height: 6rem;">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ category.title }}</h5>
                                        <p class="card-subtitle mb-2 text-muted">{{ category.description }}</p>
                                    </div>
                                </a>
                            </div>                              
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-info text-center">
                        {{ 'No results found for:'|trans }}&nbsp;<strong>{{ request.q }}</strong>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
