{% extends 'home.html' %}

{% load i18n pagination django_bootstrap_breadcrumbs permission_tags static  %}

{% block breadcrumbs %}

  {{ block.super }}
    {% breadcrumb 'Manage Users' 'users:manage' %}

{% endblock %}

{% block menu %}
{% endblock %}

{% block content %}
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <p>{{ message }}</p>
            </div>
        {% endfor %}
    {% endif %}
    <form action="" method="GET" class="form-horizontal">
        <div class="form-group">
            <div class="col-md-11 col-sm-11 col-xs-11">
                <input type="text" class="form-control" name="search" placeholder="{% trans 'Search...' %}" />
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1">
                <button type="submit" class="btn btn-fab btn-fab-mini">
                    <i class="material-icons">search</i>
                </button>
            </div>
        </div>
    </form>

    {% if users|length > 0 %}
        {% for acc in users %}
            <div class="row panel panel-default">
                <div class="panel-body">
                    <div class="col-md-4">
                        {% if acc.image %}
                            <div style="background-image: url('{{ acc.image.url }}'); background-size: 100% 100%; background-repeat: no-repeat;" alt="photoUser" class="img-circle img-responsive img-list-user"></div>
                        {% else %}
                            {% if acc.gender == 'M' %}
                                <img src="{% static 'img/male_avatar.png' %}" alt="Avatar" class="img-circle img-responsive img-list-user">
                            {% else %}
                                <img src="{% static 'img/female_avatar.png' %}" alt="Avatar" class="img-circle img-responsive img-list-user">
                            {% endif %}
                        {% endif %}
                    </div>
                    <div class="col-md-8">
                        <p>{% trans 'Name' %}: {{ acc.name }}</p>
                        <p>{% trans 'Profile' %}: {{ acc.get_type_profile_display }}</p>
                        <p>{% trans 'Email' %}: {{ acc.email }}</p>
                        <p>{% trans 'Contact' %}: {{ acc.phone }}</p>
                        <div align="right">
                            <a href="{% url 'users:update' acc.username %}" class="btn btn-raised btn-success">{% trans 'Edit' %}</a>
                            <a href="javascript:void(0)" class="btn btn-default btn-raised btn-lg" data-toggle="modal" data-target="#DeleteModal{{ forloop.counter }}">{% trans 'Delete' %}</a>
                        </div>
                    </div>


                    <!-- Modal -->
                    <div class="modal fade" id="DeleteModal{{ forloop.counter }}" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="DeleteModalLabel">{% trans 'Confirm delete' %}</h4>
                          </div>
                          <div class="modal-body">
                            {% trans 'Are you sure you want to delete the user' %} <b>{{acc.name}}</b>?
                          </div>
                          <div class="modal-footer">
                            <a href="#" class="btn btn-raised btn-default" data-dismiss="modal">{% trans 'Cancel' %}</a>
                            <a href="{% url 'users:delete' acc.username %}" class="btn btn-raised btn-success" style="margin-top: 0">{% trans 'Delete' %}</a>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        {% pagination request paginator page_obj %}
    {% else %}
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <p>{% trans 'No users found' %}</p>
            </div>
        </div>
    {% endif %}
{% endblock %}