<?php
/**
 * Widok skrótu [ped_piesn] — pieśni do modlitwy z przenikającymi się obrazami.
 *
 * Każda pieśń ma własny odtwarzacz, a jej nazwa stoi POD nim: pasek odtwarzania
 * jest tym, po co się tu przychodzi, więc to on ma być pierwszy pod ręką.
 *
 * Obrazy pokazujemy w całości, nie w wykroju. Ikony Jasnogórskiej nie przycina
 * się do paska — albo widać ją całą, albo nie ma jej wcale.
 *
 * Nic nie gra samo z siebie. Dźwięk, który włącza się bez pytania, jest na
 * stronie modlitewnej gorszy niż brak dźwięku: ktoś otwiera ją w pracy albo
 * w kościele. Włączenie jednej pieśni zatrzymuje drugą.
 */
if (!defined('ABSPATH')) { exit; }
$piesni = ped_piesni();
$obrazy = ped_obrazy();
if (!$piesni) { return; }   // brak nagrań — blok w ogóle się nie pokazuje
$idp = 'pedp' . wp_rand(1000, 9999);
?>
<section class="ped-piesn" data-motyw="ciemny" id="<?php echo esc_attr($idp); ?>">
  <h3 class="ped-piesn-tytul"><?php echo esc_html($a['tytul']); ?></h3>

  <figure class="ped-piesn-obrazy">
    <div class="ped-obrazy">
      <?php foreach ($obrazy as $i => $o) : ?>
        <img class="ped-obraz<?php echo $i === 0 ? ' widoczny' : ''; ?>"
             src="<?php echo esc_url($o['url']); ?>"
             alt="<?php echo esc_attr($o['nazwa']); ?>" loading="lazy">
      <?php endforeach; ?>
      <button type="button" class="ped-powieksz" aria-label="Pokaż obraz na całym ekranie">⤢</button>
    </div>
    <?php if ($obrazy) : ?>
      <figcaption class="ped-piesn-podpis"><?php echo esc_html($obrazy[0]['nazwa']); ?></figcaption>
    <?php endif; ?>
  </figure>

  <div class="ped-piesn-pult">
    <?php foreach ($piesni as $p) : ?>
      <div class="ped-piesn-jedna">
        <audio class="ped-audio" preload="none" controls
               src="<?php echo esc_url($p['url']); ?>">
          Twoja przeglądarka nie odtwarza dźwięku —
          <a href="<?php echo esc_url($p['url']); ?>">pobierz pieśń</a>.
        </audio>
        <p class="ped-piesn-nazwa"><?php echo esc_html($p['nazwa']); ?></p>
      </div>
    <?php endforeach; ?>
  </div>

  <p class="ped-male ped-piesn-stopka">
    Nic tu nie zagra samo. Włącz wtedy, gdy będziesz gotów.
  </p>
</section>
