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

{% load static %} 

{% block title %} Views Campaigns {% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Views Campaigns </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Campaigns</a></li>
            <li class="breadcrumb-item active" aria-current="page">views</li>
        </ol>
    </div>
</div>
{% endblock %}


{% block content %}  
<div class="row"> 
    {% if campaigns %}
    {% for campaign in campaigns %} 
    <div class="col-sm-12 col-md-6 col-lg-6 col-xl-3">
        <form  method="POST" >
            {% csrf_token %}
            <div class="card">
                <div class="card-body text-center"> 
                    <h2 class="mb-2 number-font">{{ campaign.name }} </h2>
                    <h6 class="mt-4 mb-2"> CPM : {{ campaign.cpm }}</h6> 
                    <p class="text-muted">Pacing :  {{ campaign.pacing }}
                        {% if campaign.pacing %}
                            <br>Start :  {{ campaign.start_day }} <br> END :  {{ campaign.end_day }}
                        {% endif %} 
                    </p>
                    <div class="d-flex gap-2 mt-3">
                        <!-- View Button -->
                        <a href="{% url 'campaigns:view_campaign' id_campaign=campaign.id_campaign  %}" 
                        class="btn btn-info d-flex align-items-center gap-2" 
                        data-bs-toggle="tooltip" 
                        data-bs-placement="top" 
                        title="View campaign details"
                        name="view_btn">
                            <i class="fe fe-eye"></i>
                            <span class="d-none d-sm-inline">View</span>
                        </a>

                        <!-- Edit Button -->
                        <a href="{% url 'campaigns:edit_campaign' id_campaign=campaign.id_campaign  %}" 
                        class="btn btn-warning d-flex align-items-center gap-2" 
                        data-bs-toggle="tooltip" 
                        data-bs-placement="top" 
                        title="Edit campaign settings"
                        name="edit_btn">
                            <i class="zmdi zmdi-edit"></i>
                            <span class="d-none d-sm-inline">Edit</span>
                        </a>

                        <!-- Disable Button -->
                        <a href="{% url 'campaigns:disable_campaign' id_campaign=campaign.id_campaign  %}" 
                        class="btn btn-danger d-flex align-items-center gap-2" 
                        data-bs-toggle="tooltip" 
                        data-bs-placement="top" 
                        title="Disable this campaign"
                        name="disable_btn" >
                            <i class="zmdi zmdi-refresh-sync-disabled"></i>
                            <span class="d-none d-sm-inline">Disable</span>
                        </a>

                        <!-- Export Button -->
                        <a href="{% url 'campaigns:load_excel' id_campaign=campaign.id_campaign  %}" 
                        class="btn btn-success d-flex align-items-center gap-2" 
                        data-bs-toggle="tooltip" 
                        data-bs-placement="top" 
                        title="Export campaign data to Excel"
                        name="export_btn"
                        target="_blank">
                            <i class="zmdi zmdi-import-export"></i>
                            <span class="d-none d-sm-inline">Export</span>
                        </a>
                    </div> 
                </div>
            </div>
        </form>
    </div> 
    {% endfor%} 
    {% else %}
    <div class="col-12">
        <div class="alert alert-warning">
            No Campaigns found.
        </div>
        <div>
            create a new <a href="{% url 'campaigns:add_campaign' %}">Campaign</a>
        </div>
    </div> 
    {% endif %}
</div>  
{% endblock content %}