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

<!--adding a new staff member.-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Add a new staff</button>
  <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>
        </div>
        <div class="card-body">
          <span >Name Mentioned: <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>
    {% endfor %}
  </div>
{% endblock %}