{% extends "layouts/base.html" %}

{% load static %} 

{% block title %} TV Channel: Jingles {% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> View {{ channel.channel_name }} Jingles </h1> 
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li> 
            <li class="breadcrumb-item"><a href="{% url 'channels:views_jingles' %}">Jingles</a></li>
        <li class="breadcrumb-item active" aria-current="page">View</li>
    </ol> 
</div>
{% endblock %}


{% block content %}  
<div class="row"> 
    {% if jingles %} 
        {% for jingle in jingles %} 
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <div class="card">
                <div class="card-body text-center"> 
                    <h2 class="mb-2 number-font"> {{ jingle.name }}</h2> 
                    <video height= '300' controls  >
                        <source src="{{jingle.get_file_url}}"  type='video/mp4'></source> 
                    </video> 
                    <p class="text-muted">Status:  {% if jingle.is_active %}Active{% else %}Inactive{% endif %}</p>
                </div>
            </div> 
        </div>
        {% endfor%}
    {% else %}
        <div class="col-sm-12">
            <div class="alert alert-warning">
                No jingles found.
            </div>
        </div>
    {% endif %}
</div>  
{% endblock content %}