{% extends 'core/base.html' %}

{% block content %}
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Dashboard</h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        {% include 'core/partials/_breadcrumbs.html' %}
        <!-- /.breadcrumb -->
    </div>
    <!-- .row -->
    <div class="row">
        <div class="col-md-12">

            {% include 'core/partials/flash_messages.html' %}
            <div class="white-box">
                <div class="row row-in">
                    <div class="col-lg-3 col-sm-6 row-in-br">
                        <h3 class="box-title">Campaigns</h3>
                        <ul class="list-inline two-part">
                            <li><i class="ion-speakerphone text-info"></i></li>
                            <li class="text-right"><span class="counter">{{ total_campaings }}</span></li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-sm-6 row-in-br  b-r-none">
                        <h3 class="box-title">Contacts</h3>
                        <ul class="list-inline two-part">
                            <li><i class="icon-people text-info"></i></li>
                            <li class="text-right"><span class="counter">{{ total_contacts }}</span></li>
                        </ul>
                    </div>
                    <div class="col-lg-3 col-sm-6 row-in-br">
                        <h3 class="box-title">Messages</h3>
                        <ul class="list-inline two-part">
                            <li><i class="ion-ios-email-outline text-info"></i></li>
                            <li class="text-right"><span class="counter">{{ total_messages }}</span></li>
                        </ul>
                    </div>

                    <div class="col-lg-3 col-sm-6  b-0">
                        <h3 class="box-title">Bad numbers</h3>
                        <ul class="list-inline two-part">
                            <li><i class="ion-person text-danger"></i></li>
                            <li class="text-right">
                                <span class="counter">12</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
            <div class="white-box">
                <h3 class="box-title">Campagnes recentes
                    <div class="col-md-4 col-sm-5 col-xs-6 pull-right">
                        <select class="form-control pull-right row b-none">
                            <option value="">Now</option>
                            <option>March 2017</option>
                            <option>April 2017</option>
                            <option>May 2017</option>
                            <option>June 2017</option>
                            <option>July 2017</option>
                        </select>
                    </div>
                </h3>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>NAME</th>
                            <th>DATE</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for c in campaigns %}
                            <tr>
                                <td>{{ c.id }}</td>
                                <td class="txt-oflo">{{ c.name }}</td>
                                <td class="txt-oflo">
                                    {{ c.start_date|date }}
                                </td>
                                <td>
                                    <a href="{% url 'campaigns:show' c.id %}">
                                        <i class="ion-ios-search-strong"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-end">
                        <div class="mr-auto p-2">
                            <a href="{% url 'campaigns:index' %}">Campagnes</a>
                        </div>
                        <div class="p-2">
                            <a href="" class="btn btn-success btn-circle">
                                <i class="fa fa-plus"></i>
                            </a>                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="white-box">
                <h3 class="box-title">Alerts</h3>
                <ul class="feeds">
                    <li>
                        <div class="bg-danger">
                            <i class="fa fa-times text-white"></i>
                        </div>
                        Broker is not running.
                    </li>
                    <li>
                        <div class="bg-success"><i class="ti-server text-white"></i></div>
                        Server #1 overloaded.<span class="text-muted">2 Hours ago</span>
                    </li>

                </ul>
            </div>
        </div>
    </div>

{% endblock %}