{% 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"> Campaigns </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Campaigns </a></li>
                    <li class="breadcrumb-item active" aria-current="page">views Campaigns</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 channels in channels %}
  
            <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">{{ channel.channel_name }} </h2>
                                            <h6 class="mt-4 mb-2"> CPM : {{ channel.cpm }}</h6>
                                          
                                             <p class="text-muted">Pacing :  {{ channel.pacing }}
                                                {% if channel.pacing %}
                                                    <br>Start :  {{ channel.start_day }} <br> END :  {{ channel.end_day }}
                                                {% endif %}

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

{% endblock content %}