{% extends 'ccc/beacons/base.html' %}
{% load staticfiles %}
{% block title %} Beacons Campaigns {% endblock title %}
{% block content-body %}
    <div ng-controller="CampaignListCtrl" class="content-list">
        <div class="row page-header-title">
            {% block page-title %}
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                     <h3 class="page-title">
                        Beacons Campaigns
                    </h3>
                </div>
            {% endblock page-title %}
        </div>
            <!-- END PAGE HEADER-->
        {% block page-body %}
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">

            </div>
            <div class="col-lg-8 col-md-6 col-sm-6 col-xs-6">

            </div>
			<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
				<button type="button" class="btn btn-primary add-message-btn" ng-click="getForm('{% url 'ccc:beacons_campaign_form' %}', false, 'md')">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i> Add Campaign
                </button>
            </div>
        </div>
        <div class="clearfix"></div>
        <!-- BEGIN DETAILS -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 table-responsive">
                <table class="table table-bordered">
					<thead>
                        <tr>
                            <th>#</th>
                            <th>Title</th>
                            <th>From Date</th>
                            <th>To Date</th>
							<th>Created date</th>
                            <th>Status</th>
                            <th>Rule</th>
							<th class="action">Action</th>
                        </tr>
                    </thead>
                    <tbody infinite-scroll='campaign_list.nextPage()' infinite-scroll-disabled='campaign_list.busy' infinite-scroll-distance='5'>
                        <tr ng-repeat="campaign in campaign_list.items">
                            <td ng-cloak>{$ $index + 1 $}</td>
                            <td ng-cloak>{$ campaign.title $}</td>
                            <td ng-cloak>{$ campaign.from_date $}</td>
                            <td ng-cloak>{$ campaign.to_date $}</td>
                            <td ng-cloak>{$ campaign.created_date $}</td>
                            <td class="onoff">
                                <i class="fa fa-toggle-on active" aria-hidden="true" ng-if="campaign.status == true" ng-click="changeStatus();"></i>
                                <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="campaign.status == false" ng-click="changeStatus();"></i>
                            </td>
                            <td><button type="button" ng-if="campaign.is_rule == false" class="btn btn-sm" ng-click="getForm('{% url 'ccc:beacons_rule_form' %}', is_edit=true)">
                                    <i class="fa fa-pencil-square" aria-hidden="true"></i>Edit Rule
                                </button>
                                <button type="button" ng-if="campaign.is_rule == true" class="btn btn-sm" ng-click="getForm('{% url 'ccc:beacons_rule_form' %}', is_edit=true)">
                                    <i class="fa fa-pencil-square" aria-hidden="true"></i>Add Rule
                                </button>
                            </td>
                            <td class="action">
                                <button type="button" class="btn btn-success btn-sm" ng-click="getForm('{% url 'ccc:beacons_campaign_form' %}', true, 'md')">
                                    <i class="fa fa-pencil-square" aria-hidden="true"></i>Edit
                                </button>
                                <button type="button" class="btn btn-danger btn-sm" ng-click="deleteConfirmedForm('{% url 'ccc:beacons_delete' %}')"><i class="fa fa-trash" aria-hidden="true"></i>Delete</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END DETAILS -->
        <div class="clearfix"></div>
    {% endblock page-body %}
    </div>
{% endblock content-body %}
{% block extrascripts %}
    <script src="{% static 'js/beacons/controllers/campaigns.js' %}" type="text/javascript"></script>
{% endblock extrascripts %}