{% extends 'user-base.html' %}
{% load crispy_forms_tags %}
{% block content %}

<!--adding a new staff member.-->
  {# Django Tempus Dominus assets are included in `{{ form.media }}` #}
  {{ date_form.media }}
  <div class="row">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg" style="margin: 15px 5px 15px 15px; margin-bottom: 30px;">Add a new staff</button>
    <form method="post" class="form-row align-items-center" action="{% url 'sync-staff-list' %}">
        {% csrf_token %}
      <div class="col-auto">
        {{ date_form.start_date }}
      </div>
      <div class="col-auto">
        {{ date_form.end_date }}
      </div>
      <input type="submit" name="Submit" class="btn btn-primary">
    </form>
  </div>
  <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend style="text-align: center;" class="border-bottom mb-4"><b>Add a new staff.</b></legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group" style="display: grid;">
                <button class="btn btn-outline-info" type="submit">Submit</button>
            </div>
        </form>
      </div>
      </div>
    </div>
  </div>

  <div class="row">
    {% for staff in staffs %}
    <div class="col-sm-6">
      <div class="card mt-2 mb-2">
        <div class="card-header">
          <span style="font-size: larger; font-family: sans-serif; font-weight: bold;">{{staff.name}}</span>
          <span style="float: right;">
            {{ staff.department }}
              <span data-toggle="modal" data-target="#delete-staff"><i class="fa fa-trash" aria-hidden="true" style="color: blue; margin-left: 2rem;"></i></span>
          </span>
        </div>
        <div class="card-body">
          Name Mentioned:<span > <i class="fa fa-google" aria-hidden="true" style="color: #ff7700; margin-left: 1rem;"></i> {{ staff.name_mentioned_google }}</span>
          <span > <i class="fa fa-facebook" aria-hidden="true" style="color: blue; margin-left: 2rem;"></i> {{ staff.name_mentioned_facebook }} </span>
<!--          <span ><i class="fa fa-yelp" aria-hidden="true" style="color: red; margin-left: 2rem;"></i> {{ staff.name_mentioned_yelp }}</span>-->
          <span style="float: right;">Bonus: ${{ staff.total_units }}</span>
        </div>
      </div>
    </div>

      <!-- Modal -->
      <div class="modal fade" id="delete-staff" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              If you delete this staff then you will lose all information about this staff.
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

              <a type="button" href="{% url 'staff-delete' staff.id %}" class="btn btn-danger">Yes, Delete!</a>
            </div>
          </div>
        </div>
      </div>

    {% endfor %}
  </div>
{% endblock %}