{% load static %}
<section class="overflow-hidden rounded-2xl bg-brand-950 text-white shadow-(--shadow-raised)" aria-label="WebTV">
  <div class="flex items-center justify-between px-4 py-3">
    <h2 class="flex items-center gap-2 text-sm font-extrabold tracking-wider !text-white uppercase">{% icon "video" "size-4 text-gold-400" %} Label Info WebTV</h2>
    {% if site.youtube_live_id %}<span class="flex items-center gap-1.5 rounded bg-signal-500 px-2 py-0.5 text-[11px] font-bold uppercase"><span class="size-1.5 animate-pulse rounded-full bg-white"></span> Direct</span>{% endif %}
  </div>
  {% if site.youtube_live_id %}
    <div class="aspect-video"><iframe src="https://www.youtube-nocookie.com/embed/{{ site.youtube_live_id }}" title="Direct Label Info TV" class="size-full" allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen loading="lazy"></iframe></div>
  {% else %}
    <a href="{{ site.youtube_channel_url }}" target="_blank" rel="noopener" class="group relative block aspect-video overflow-hidden">
      <img src="{% static 'img/webtv_bg.png' %}" alt="" class="size-full object-cover opacity-70 transition duration-500 group-hover:scale-105" loading="lazy">
      <span class="absolute inset-0 bg-gradient-to-t from-brand-950 to-transparent"></span>
      <span class="absolute inset-0 flex items-center justify-center">
        <span class="flex size-16 items-center justify-center rounded-full bg-signal-500 shadow-xl ring-8 ring-signal-500/25 transition group-hover:scale-110">{% icon "play" "size-7 translate-x-0.5" %}</span>
      </span>
    </a>
  {% endif %}
  <div class="flex gap-2 p-4">
    <a href="{{ site.youtube_channel_url }}" target="_blank" rel="noopener" class="btn btn-danger btn-sm flex-1">{% icon "youtube" %} Nos vidéos</a>
    <a href="{{ site.youtube_channel_url }}?sub_confirmation=1" target="_blank" rel="noopener" class="btn btn-sm flex-1 bg-white/10 text-white hover:bg-white/20">S'abonner</a>
  </div>
</section>