{% extends "Includes/layout.html.twig" %}

{% block body %}

    <div id="app-portal-gb">
        <main class="row main mx-0 fade-in fade-in" id="main-content" v-cloak>
            <section class="content-area p-r-l-6">
                <div :class="[showModifyPanel || showCreatePanel ? 'show' : '', 'modal-backdrop']"
                     style="visibility: visible !important;"
                     id="modal-backdrop" ref="modalBackdrop"
                     v-show="showModifyPanel || showCreatePanel">
                </div>
                <div class="jumbotron">
                    <h1 class="display-4">{{ 'WikiGB'|trans }}</h1>
                    <p class="lead">{{ 'Search Wiki'|trans }}</p>
                    <hr class="my-12">
                    <form class="form-inline">
                        <div class="form-group-lg mr-5">
                                <input-dropdown
                                        style="width: 400px;"
                                        :id="'inputSearchWiki'"
                                        :data-list="filteredList"
                                        :placeholder="'{{ 'Search Wiki placeholder'|trans }}'"
                                        :searchable="false"
                                        props-return-value="link"
                                        props-displayed-value="titleExtend"
                                        v-model="selectedWiki"
                                        @typing="filter"
                                        ref="inputSearchWiki">
                                </input-dropdown>
                        </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="searchInWikiContent"
                                       v-model="searchInWikiContent">
                                <label class="form-check-label"
                                       for="searchInWikiContent">{{ 'Search in Wiki content'|trans }}</label>
                            </div>
                    </form>
                </div>
                <div class="flex-column-reverse">
                    <button class="btn btn-primary rounded-30 px-4 py-2 border border-primary cursor-pointer my-auto ml-3"
                            @click="openCreatePanel()">{{ 'Create service'|trans }}
                    </button>
                </div>
                <div style="display: flow">
                    <div class="jumbotron" v-for="category in categoriesPagination">
                        <h1 class="display-4"><% category %></h1>
                        <hr class="my-4">   
                        <div class="row row-cols-1 row-cols-md-5">
                            <div class="col mb-4"
                                 v-for="(service) in getServicesByCategory(category)">
                                <div class="card" style="width: 18rem; margin-top: 1rem; padding: 1rem">
                                <span class="span-icon small cursor-pointer d-flex justify-content-center align-items-center"
                                      data-tippy-content="{{ 'Modify service browser'|trans }}"
                                      style="width: 30px; height: 30px"
                                      @click="openModifyPanel(service.id)">
                                            <i class="fal fa-pen"></i>
                                        </span>
                                    <a :href="service.serviceLink" target="_blank">
                                        <img class="card-img-top center" :src="service.imgPath"
                                             :alt="service.name"
                                             style="width: 16rem; height: 10rem; object-fit: contain;">
                                        <div class="card-body">
                                            <h5 class="card-title"><% service.name %> </h5>
                                            <div style="height: 4rem; overflow-y: auto">
                                                <p class="card-text"><% service.description %></p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>


        {{ include('Admin/PortalGB/edit.html.twig') }}
    </div>

    <span class="d-none invisible twig-data-path-ajax-get-wiki"
          data-pathajaxgetwiki="{{ path('ajax_get_gitlab_wiki') }}"></span>
    <span class="d-none invisible twig-data-services-browser"
          data-services="{{ services|json_encode }}"></span>
    <span class="d-none invisible twig-data-user-teams"
          data-userteams="{{ userTeams|json_encode }}"></span>
    <span class="d-none invisible twig-data-sb-img-list"
          data-sbimglist="{{ sbImgList|json_encode }}"></span>
    <span class="d-none invisible twig-data-path-ajax-modify"
          data-pathajaxmodify="{{ path('services_browser_ajax_modify', {'service': ':serviceid'}) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-delete"
          data-pathajaxdelete="{{ path('services_browser_ajax_delete', {'service': ':serviceid'}) }}"></span>
    <span class="d-none invisible twig-data-path-ajax-create"
          data-pathajaxcreate="{{ path('services_browser_ajax_create') }}"></span>
    <span class="d-none invisible twig-data-path-ajax-upload-image"
          data-pathajaxuploadimage="{{ path('services_browser_ajax_upload_image') }}"></span>

{% endblock %}

{% block specificJS %}
    {{ encore_entry_script_tags('portal_gb_index') }}
{% endblock %}