{% extends "DAIManagementApp/base.html" %}
{% block content %}


<div class="app-content">
    <div class="side-app">

        <!-- PAGE-HEADER -->
        <div class="page-header">
            <div>
                <h1 class="page-title"> Views Jingles </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Jingles </a></li>
                    <li class="breadcrumb-item active" aria-current="page">views Jingles</li>
                </ol>
            </div>
            <div class="ms-auto pageheader-btn">
                <a href="#" class="btn btn-primary btn-icon text-white me-2">
                    <span>
                        <i class="fe fe-plus"></i>
                    </span> Add Account
                </a>
                <a href="#" class="btn btn-success btn-icon text-white">
                    <span>
                        <i class="fe fe-log-in"></i>
                    </span> Export
                </a>
            </div>
        </div>

        <div class="row">

            {% 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">
                                          <!-- <i class="fa fa-firefox text-primary fa-3x"></i> -->
                                            <h2 class="mb-2 number-font"> {{ jingle.jingle_name }}</h2>
                                            
                                            <video height= '300' controls  >
                                                <source src="/static/{{jingle.video_jingle}}"  type='video/mp4'    ></source>
        
                                            </video>
                                          
                                             <p class="text-muted">Status :  
                                                {% if jingle.status %}
                                                    Avtive
                                                {% else %}
                                                    Inactive
                                                {% endif %}

                                            </p>
                                         
                                      </div>
                                  </div>
                
            </div>
            {% endfor%}
        </div>
    </div>
</div>

{% endblock content %}