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

{% load static %}

{% block content %}

<div class="app-content">
    <div class="side-app">
        <script src="https://cdn.jsdelivr.net/npm/afterglowplayer@1/dist/afterglow.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

        <script>
            if (Hls.isSupported()) {
                var video = document.getElementById('video123');
                var hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            }
        </script>

        <div class="page-header">
            <div>
                <h1 class="page-title"> Report | {{ selected_brand }} | {{ report_date }}  </h1>
            </div>
        </div>

        <br>

        <div class="container">
            <div class="table-responsive">
                <table id="data-table321" class="table table-striped table-bordered">
                    <thead



                    <tr>
                            <th class="text-center">Channel</th>
                            <th class="text-center">Adspot</th>
                            <th class="text-center">AirTime</th>
                            <th class="text-center">Total Impressions</th>
                            <th class="text-center">EPG</th>
                        </tr>

                    </thead>
                    <tbody>
                        {% for row in data %}
                            <tr>
                                <td class="text-center"> {{ row.networkname }}</td>
                                <td class="text-center"> {{ row.spotId }}</td>
                                <td class="text-center"> {{ row.airTime }}</td>
                                <td class="text-center">{{ row.total_volume|floatformat }}</td>
                                <td class="text-center"> {{row.emission_name }}</td>
                            </tr>
                        {% endfor %}

                        <tr>
                          <td></td>
                          <td></td>
                          <td></td>
                            <td class="text-center"><h6><b> {{ total }}</b></h6></td>
                            <td class="text-center"><h6><b>Total Impressions </b></h6></td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

{% endblock content %}