templates/Frontend/Video/Index.twig line 1

  1. {% extends 'Frontend/Layout.twig' %}
  2. {% import 'Frontend/Macros.twig' as macro %}
  4. {% block javascripts %}
  5.     {{ encore_entry_script_tags('frontend') }}
  6. {% endblock %}
  8. {% block body %}
  10.     <h1>Videos</h1>
  12.     <div class="row">
  13.         <div class="col-sm-4">
  14.             <div class="mb-3 p-4 bg-body-secondary">
  16.                 <div class="mb-2">
  17.                     <label class="label-small">Studio</label>
  18.                     <select id="studio"
  19.                            autocomplete="off"
  20.                            placeholder="Search ..."
  21.                            data-controller="frontend-video-studio-search"
  22.                            data-url-search="{{ path('studio.search') }}"
  23.                            data-selected="{{ selectedStudios|json_encode }}"
  24.                     >
  25.                     </select>
  26.                 </div>
  28.                 <div class="mb-2">
  29.                     <label class="label-small">Actor</label>
  30.                     <select id="actor"
  31.                            autocomplete="off"
  32.                            placeholder="Search ..."
  33.                            data-controller="frontend-video-actor-search"
  34.                            data-url-search="{{ path('actor.search') }}"
  35.                            data-selected="{{ selectedActors|json_encode }}"
  36.                     >
  37.                     </select>
  38.                 </div>
  40.                 <div class="mb-2">
  41.                     <label for="search" class="label-small">Title</label>
  42.                     <input id="search"
  43.                            value="{{ search }}"
  44.                            class="form-control"
  45.                            type="text"
  46.                            placeholder=""
  47.                     >
  48.                 </div>
  50.                 {% for category in categories %}
  51.                 <div class="mb-2">
  52.                     <label for="category-{{ category.id }}" class="label-small">{{ category.name }}</label>
  53.                     <select id="category-{{ category.id }}"
  54.                             class="tag"
  55.                             autocomplete="off"
  56.                             placeholder="All"
  57.                             data-controller="frontend-video-tag-select"
  58.                             {#{% if category.isMultipleSelect %}multiple{% endif %}#}
  59.                     >
  60.                         <option value="">All</option>
  61.                         {% if tags[category.id] is defined %}
  62.                             {% for tag in tags[category.id] %}
  63.                                 <option value="{{ tag.id }}"{% if tag.id in selectedTagIds %} selected{% endif %}>{{ tag.name }}</option>
  64.                             {% endfor %}
  65.                         {% endif %}
  66.                     </select>
  67.                 </div>
  68.                 {% endfor %}
  70.                 <div class="mt-3">
  71.                     <button class="btn btn-secondary"
  72.                             data-controller="frontend-video-search"
  73.                             data-url="{{ path('video.index') }}"
  74.                             data-action="frontend-video-search#search"
  75.                     >
  76.                         Apply filters
  77.                     </button>
  78.                     <button class="btn btn-link"
  79.                             data-controller="frontend-video-search"
  80.                             data-url="{{ path('video.index') }}"
  81.                             data-action="frontend-video-search#clear"
  82.                     >
  83.                         Clear filters
  84.                     </button>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.         <div class="col-sm-8">
  90.             <turbo-frame id="video-list-{{ paging.getPage() }}" target="_top">
  92.                 {% if videos|length == 0 %}
  94.                     <div class="alert alert-warning">No videos found that matches the search criteria.</div>
  96.                 {% else %}
  97.                     <div class="row row-cols-1 row-cols-md-3 g-3">
  98.                         {% for video in videos %}
  99.                             <div class="col mb-3">
  100.                                 <div class="card">
  101.                                     {% set img = video.getFrontImage() %}
  102.                                     {% if img %}
  103.                                         <div class="bg-light ratio ratio-4x3">
  104.                                             <img src="/img/video/{{ img.id }}/resize(150,100)/{{ img.filename }}"
  105.                                                  class="card-img-top object-fit-cover"
  106.                                                  alt=" "
  107.                                             >
  108.                                         </div>
  109.                                     {% endif %}
  110.                                     <div class="card-body">
  111.                                         <a href="{{ path('video.show', {'id':video.id}) }}" class="stretched-link">
  112.                                             <h5 class="card-title">{{ video.title }}</h5>
  113.                                         </a>
  114.                                         <p class="card-text">{{ video.description }}</p>
  115.                                     </div>
  116.                                 </div>
  117.                             </div>
  118.                         {% endfor %}
  119.                     </div>
  121.                     {% if url_next_page %}
  122.                         <turbo-frame
  123.                                 id="video-list-{{ paging.getNextPage() }}"
  124.                                 src="{{ url_next_page }}"
  125.                                 loading="lazy"
  126.                                 target="_top"
  127.                         ></turbo-frame>
  128.                     {% endif %}
  130.                 {% endif %}
  132.             </turbo-frame>
  134.         </div>
  136.     </div>
  138. {% endblock %}