{% extends "base/main_base.html" %}

{% set active_page ='people' %}

{% block pagehead %}
<title>People</title>
<style>
  .hidden {
    display: none;
  }

  .show {
    display: inline-block;
  }
</style>

{% endblock %}

{% block content %}
<script type="text/javascript">
  $(function () {
    $('.delete_me').click(function () {
      var id = $(this).attr('id');
      console.log(id);
      var name = id.split('-')[1];
      console.log(name);
      var ask = confirm("Do you want to delete ?");
      if (ask == true) {
        window.location.replace("/people/delete/" + name, "_self")
      } else {

      }
    });
  });
</script>
<div class="container">
  <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Note</th>
          <th></th>
        </tr>
      </thead>
      <tbody>

  {%for person in people%}
        <tr>
            <td>{{person.name}}</td>
            <td>{{person.phone}}</td>
            <td>{{person.email}}</td>
            <td>{{person.notes}}</td>
            <td>
              <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal-{{person.id}}">
                ..more info
              </button>
              <a href="/people/edit/{{person.id}}" style="text-decoration: none;">
                <button data-name="{{person.id}}" class="btn btn-warning" type=""><i id='ico-{{person.id}}'
                    class="fas fa-pencil-alt"></i></button>
              </a>
              <a href="#" style="text-decoration: none;">
                <button id='del-{{person.id}}' class="delete_me btn btn-danger" type=""><i class="fas fa-trash-alt"></i></button>
              </a>
            </td>
        </tr>
        <!-- People Modal -->
        <div class="modal fade" id="modal-{{person.id}}" tabindex="-1" role="dialog" aria-labelledby="peopleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header ">
                <h5 class="modal-title" id="peopleModalLabel">{{person.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Age: {{person.age}}</li>
                  <li class="list-group-item">Phone: {{person.phone}}</li>
                  <li class="list-group-item">Mobile: {{person.mobile}}</li>
                  <li class="list-group-item">Email: {{person.email}}</li>
                  <li class="list-group-item">Facebook: {{person.facebook}}</li>
                  <li class="list-group-item">Twitter: {{person.twitter}}</li>
                  <li class="list-group-item">Linkedin: {{person.linkedin}}</li>
                  <li class="list-group-item">Notes: {{person.notes}}</li>
                </ul>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <!-- People Modal End -->
  {%endfor%}
   </tbody>   
  </table>
</div>
{% endblock %}