{% import "bootstrap/utils.html" as utils %}
{% extends "base.html" %}
{% block title %}Classifications{% endblock %}
{% block body %}
<div class='notifications bottom-right'></div>
<div class="content-section">
  <div class="outer">
    <div class="middle">
      <div class="inner">
        <br/>
        {{ utils.flashed_messages() }}
        <br/>
        <h1 style="text-align:center;">Classifications</h1>
        {% if classifications %}
          <hr class="intro-divider">
          <div class="big-center">
            <table class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th> Pattern* </th>
                  <th> Brand </th>
                  <th> Sub Brand </th>
                  <th> DSP </th>
                  <th> Use Campaign Id </th>
                  <th> Use Campaign </th>
                  <th> Use Placement Id** </th>
                  <th> Use Placement** </th>
                  <th> Edit </th>
                  <th> Delete </th>
                </tr>
              </thead>
              <tbody>
              {% for classification in classifications %}
                <tr>
                  <td> {{ classification.pattern }} </td>
                  <td> {{ classification.brand }} </td>
                  <td> {{ classification.sub_brand }} </td>
                  <td> {{ classification.dsp }} </td>
                  <td> {{ classification.use_campaign_id }} </td>
                  <td> {{ classification.use_campaign }} </td>
                  <td> {{ classification.use_placement_id }} </td>
                  <td> {{ classification.use_placement }} </td>
                  <td>
                    <a href="{{ url_for('home.edit_classification', id=classification.id) }}">
                      <i class="fa fa-pencil"></i> Edit 
                    </a>
                  </td>
                  <td>
                    <a href="{{ url_for('home.delete_classification', id=classification.id) }}">
                      <i class="fa fa-trash"></i> Delete 
                    </a>
                  </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
            <p>* Pattern will always be regex and ignore case sensitivity</p>
            <p>** Valid only in DCM files</p>
          </div>
          <div style="text-align: center">
        {% else %}
          <div style="text-align: center">
            <h3> No classifications have been added. </h3>
            <hr class="intro-divider">
        {% endif %}
        
          <div class="container">
              <div class="alert alert-success" style="display: none;" id="success-alert">
                <strong>Success!</strong> New classifications applied.
              </div>
              <div class="alert alert-danger" style="display: none;" id="danger-alert">
                <strong>Error!</strong> Something went wront.
              </div>
          </div>
          <a href="{{ url_for('home.add_classification') }}" class="btn btn-default btn-lg">
            <i class="fa fa-plus"></i>
            Add Classification
          </a>
          
          <a href="#" class="btn btn-default btn-lg" id="refresh_classification">
            <i class="fa fa-refresh" id="refresh_icon"></i>
            Refresh Classification
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script type=text/javascript>

$(function() {
    $('#refresh_classification').bind('click', function () {
        $('#refresh_icon').addClass('fa-spin');
        $('#success-alert').hide();
        $('#danger-alert').hide();
        $.ajax({
          url: '/classification/reset',
          success: function (data) {
              $('#refresh_icon').removeClass('fa-spin');
              if (data.status == "success") {
                  $('#success-alert').show();
              } else {
                  $('#danger-alert').show();
              }
          },
          fail: function(data) {
              $('#refresh_icon').removeClass('fa-spin');
              $('#danger-alert').show();
          }
        });
    });
});
</script>
{% endblock %}