templates/pages/beat-detail.html.twig line 12

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block title %}Battle detail{% endblock %}
  3. {% block bodyClass %}battleBody{% endblock %}
  4. {% import "components/macros.html.twig" as macros %}
  6. {% block body %}
  8.     <section id="beat" class="beats mb-5">
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-12 heading">
  12.                     <h2>{{ beat.name }}</h2>
  13.                 </div>
  14.             </div>
  15.             <div class="row">
  17.                 <div class="card beat-card mb-4 box-shadow position-relative col-12">
  18.                     <div class="card-bg position-absolute">
  19.                         <img src="{{ asset("uploads/images/beats/"~ beat.imageName) }}"  alt="Beat"/>
  20.                     </div>
  21.                     <div class="card-controls position-absolute">
  24.                         <div class="card-bottom-controls detail">
  26.                             <div class="playingIndicator" data-indicator-id='{{ beat.id }}' style='--piWidth: 0%;'></div>
  28.                             <div class="play-button" data-id="{{ beat.id }}" data-sample="{{ beat.instrumentalFileName }}">
  29.                                 <i class="bi bi-play-circle-fill text-white" data-icon-id="{{ beat.id }}"></i>
  30.                             </div>
  32.                         </div>
  33.                     </div>
  34.                 </div>
  35.             </div>
  37.             <div class="row">
  38.                 <div class="col-md-6">
  39.                     <div class="card mb-4 mb-md-0">
  40.                         <div class="card-body">
  41.                             <h5 class="mb-4"> Beat details
  42.                             </h5>
  43.                             <p class="mb-1" style="font-size: .77rem;">Beat author</p>
  44.                             <p class="mb-4">{{ beat.author.pseudoname }}</p>
  46.                             <p class="mb-1" style="font-size: .77rem;">Beat categories</p>
  47.                             {% set maxBeatCategory = beat.category|length %}
  48.                             <p class="mb-4">{% for category in beat.category %}{{ category.name }}{% if loop.index != maxBeatCategory %},{% endif %} {% endfor %}</p>
  50.                             <p class="mt-4 mb-1" style="font-size: .77rem;">Created</p>
  51.                             <p class="mb-4" >{{ beat.createdAt|date("d/m/Y H:i:s") }}</p>
  53.                             <p class="mt-4 mb-1" style="font-size: .77rem;">Likes</p>
  54.                             <p class="mb-4" >{{ beat.favoritedClients|length }}x</p>
  56.                         </div>
  57.                     </div>
  58.                 </div>
  60.             </div>
  62.         </div>
  64.     </section>
  65. {% endblock %}