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

{% load static %} 

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


{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> View Jingles </h1>
    <div>
        <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>
</div>
{% endblock %}

{% block content %} 
 
<!-- ROW-1 -->
<div class="row"> 
    {% if data %}
    {% for i in data %}
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
            <a href="{% url 'channels:views_jingles' id_channel=i.channel.id_channel %}" >
                <div class="card">
                    <div class="card-body text-center">
                        <img src="{{ i.channel.logo }}" alt="{{ i.channel.channel_name }}">
                        <h2>{{ i.channel.channel_name }}</h2>
                        <h6 class="mt-4 mb-2">Total Adspots</h6>
                        <h3 class="mb-2 number-font">{{ i.total}}</h3>
                    </div>
                </div>
            </a>
        </div>
    {% endfor%}
    {% else %}
        <div class="col-sm-12">
            <div class="alert alert-warning">
                No Channels found.
            </div>
        </div>
    {% endif %}
</div> 
{% endblock content %}