{% set activities = [{
  avatar_image: "assets/images/256_luke-porter-261779-unsplash.jpg",
  assigned: "Luke Porter",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_daniel-gaffey-1060698-unsplash.jpg",
  assigned: "Daniel Gaffery",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_jeremy-banks-798787-unsplash.jpg",
  assigned: "Jeremy Banks",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_joao-silas-636453-unsplash.jpg",
  assigned: "Francesca Silo",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_luke-porter-261779-unsplash.jpg",
  assigned: "Luke Porter",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_daniel-gaffey-1060698-unsplash.jpg",
  assigned: "Daniel Gaffery",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_jeremy-banks-798787-unsplash.jpg",
  assigned: "Jeremy Banks",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
},
{
  avatar_image: "assets/images/256_joao-silas-636453-unsplash.jpg",
  assigned: "Francesca Silo",
  email: "contact@frontted.com",
  meta: "commented on ticket <a href='#'>#3292</a> ",
  comment: "What is the status on this ticket?",
  time: "5 min ago"
}] 
%}


{% if 'fluid' in prefix %}<div class="page__header">{% endif %}
  <div class="{{ containerClass }} page__heading-container">
    <div class="page__heading d-flex align-items-center">
      <div class="flex">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#"><i class="material-icons icon-20pt">home</i></a></li>  
            <li class="breadcrumb-item">Activities</li>
            <li class="breadcrumb-item active" aria-current="page">Page</li>
          </ol>
        </nav>
        <h1 class="m-0">Activities</h1>
      </div>
      
      <a href="" class="btn btn-success ml-1">New Activity</a>
    </div>
  </div>
  {% if 'fluid' in prefix %}</div> <!-- // END page__header --> {% endif %}
  {% if 'fluid' in prefix %}
<div class="page__header page__header-nav">
  <div class="{{ containerClass }} page__container">
    {% include "layouts/_navbar.secondary.html" %}
  </div>
</div>
{% endif %}

  <div class="{{ containerClass }} page__container">
    <div class="d-flex align-items-center">
        <div class="btn-group btn-group-toggle mb-3" data-toggle="buttons">
          <label class="btn btn-light active">
              <input type="radio" name="options" id="option1" checked=""> All
          </label>
          <label class="btn btn-light">
              <input type="radio" name="options" id="option2"><i class="material-icons text-muted-light">today</i> Events
          </label>
          <label class="btn btn-light">
            <input type="radio" name="options" id="option2"><i class="material-icons text-muted-light">work</i> Tickets
          </label>
          <label class="btn btn-light">
            <input type="radio" name="options" id="option2"><i class="material-icons text-muted-light">error</i> Issues
          </label>
          <label class="btn btn-light">
            <input type="radio" name="options" id="option2"><i class="material-icons text-muted-light">comment</i> Comments
          </label>
          <label class="btn btn-light">
            <input type="radio" name="options" id="option2"><i class="material-icons text-muted-light">account_circle</i> Staff
          </label>
        </div>
      
        <div class="ml-auto">
          
          <div class="d-flex flatpickr-calendar-right">

            
            
            <!-- <input id="filter_date" type="text" class="form-control text-center" placeholder="Select date ..." value="13/03/2018 to 20/03/2018" data-toggle="flatpickr" data-flatpickr-mode="range" data-flatpickr-alt-format="d/m/Y" data-flatpickr-date-format="d/m/Y"> -->
            <div
            class="text-right"
            data-toggle="flatpickr" 
            data-flatpickr-wrap="true"
            data-flatpickr-static="true" 
            data-flatpickr-mode="range" 
            data-flatpickr-alt-format="d/m/Y" 
            data-flatpickr-date-format="d/m/Y">
            <a href="javascript:void(0)" class="link-date" data-toggle>13/03/2018 <span class="text-muted mx-1">to</span> 20/03/2018</a>
            <input class="flatpickr-hidden-input" type="hidden" value="13/03/2018 to 20/03/2018" data-input>
          </div>
            <label for="" class="ml-1 text-muted"><i class="material-icons icon-18pt">today</i></label>

          </div>
        </div>
      </div>
  
      {% for activity in activities %}
      <div class="card p-3 mb-3">
        <div class="d-flex">
          <div class="flex-fill d-flex">
            
              <div class="avatar avatar-md mr-3" data-toggle="tooltip" data-placement="top" title="Luke P.">
                <img src="{{ activity.avatar_image }}" alt="Avatar" class="avatar-img rounded-circle">
              </div>
           
           
            <div class="flex-fill">
              <div class="d-flex mb-2">
                <a href="#" class="text-body mr-1"><strong>{{ activity.assigned }}</strong></a> <div class="text-muted"> {{ activity.meta | safe }}</div>
                <!-- <span class="text-muted ml-1"><i class="material-icons icon-16pt">email</i> {{ activity.email}}</span> -->
              </div>
              
              <div class="mb-2">
                {{ activity.comment }}
              </div>
              <div class="">
                <span class="badge badge-soft-warning badge-pill mr-1">EVENTS</span><span class="badge badge-soft-purple badge-pill mr-1">TICKETS</span><span class="badge badge-soft-danger badge-pill mr-1">ISSUES</span>
              </div>
              
            </div>
          </div>
          <div class="text-muted">{{ activity.time }}</div>
        </div>
      </div>
      {% endfor %}

      <div class="mt-4">
        {% import "components/pagination.html" as pagination %}
        {{ pagination.component(pages=3, first=true, last=true, align='right') }}
        </div>
  
  </div>