{% extends 'admin_dash/base.html' %}

{% load static %}
{% load humanize %}
{% block content %}
<div class="col-xl-10 mx-auto mt-3">
    <!-- Top Products -->
    {% for msg in messages %}

    <label class="text-{{msg.tags}} text-center col-12" style="text-align: center;">{{msg}}</label>

    {% endfor%}
    <div class="card card-default" data-scroll-height="680">
        <div class="card-header justify-content-between mb-4">
            <h2>All Users</h2>
        </div>
        <div class="card-body py-0 slim-scroll">
            {% for user in all_users %}
            <div class="media d-flex mb-5">
                <div class="media-image align-self-center mr-3 rounded">

                    <a href="#"><img
                            src="{% if user.image %} {{user.image.url}} {% else %} https://nubyira.netlify.app/images/avatar.png {% endif %}"
                            alt="user image" class="img-fluid" width="40px"></a>
                </div>
                <div class="media-body align-self-center row">
                    <div class=" ml-4 col-3">
                        <a href="#" data-toggle="modal" data-target="#permissionGrant{{user.id}}" class="">Access
                            Previledge</a>
                        <a href="">
                            <h6 class="mb-3 text-dark font-weight-medium mt-2">
                                {{ user.date_joined }} {% if user.is_staff %}
                                <span class="text-success"> staff</span> {%endif %}
                            </h6>
                        </a>
                        <a href="">
                            <h6 class="mb-3 text-dark font-weight-medium">
                                By: {{ user.last_login }}
                            </h6>
                        </a>
                    </div>
                    <div class="ml-4 col-3 ">
                        <a href="#" data-toggle="modal" data-target="#Email{{user.id}}" class="">Email
                            {{user.first_name}}</a>
                        <p class="mt-2"><span class="text-dark mr-2">Is_verified: {{user.is_verified}}</span>
                        </p>
                        <p class="mt-3">
                            <a data-toggle="modal" data-target="#newProduct{{product.code_num}}" class="text-dark">
                                Full Name: {{user.get_full_name}}</a>
                            <!-- <a href="#" data-toggle="modal"
                                data-target="#delete{{product.code_num}}">{{user.last_name}}</a> -->
                        </p>
                    </div>
                    <div class="ml-4 col-4 ">
                        <a href="#" data-toggle="modal" data-target="#subGrant{{user.id}}" class="">Subscribe
                            {{user.first_name}}</a>
                        <p class="mt-2"><span class="text-dark mr-2">Phone: {{user.phone_number}}</span>
                        </p>
                        <p class="mt-3">
                        <h6 class="mb-3 text-dark font-weight-medium ">Email: {{ user.email }} </h6>
                        <!-- <a href="#" data-toggle="modal"
                                data-target="#delete{{product.code_num}}">{{user.last_name}}</a> -->
                        </p>
                    </div>

                </div>
            </div>

            <div class="modal fade" id="subGrant{{user.id}}" 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">Subscription</h5>
                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {{user.email}}<br><br>
                            Are you sure you want to enable this user subscription?
                        </div>
                        <div class="modal-footer">
                            {% if user.subscription_set.all.0.subscribed %}
                            <a class="btn btn-danger" href="{% url 'sub_user' user.pk 'revoke' %}">Revoke Sub</a>
                            {% else %}
                            <a class="btn btn-success" href="{% url 'sub_user' user.pk 'grant' %}">Enable
                                Sub</a>
                            {% endif %}
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal fade" id="permissionGrant{{user.id}}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Give User Access</h5>
                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {{user.email}}<br>
                            {{user.get_full_name}}
                        </div>
                        <div class="modal-footer">
                            {% if user.is_staff %}
                            <a href="{% url 'access' user.id  'revert' %}"><button type="button"
                                    class="btn-danger btn">Revert
                                    Access</button></a>
                            {% else %}
                            <a href="{% url 'access' user.id  'grant' %}"><button type="button"
                                    class="btn btn-success">Give
                                    Access</button></a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="Email{{user.id}}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Send Email to {{user.email}}</h5>
                            <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <form action="{% url 'admin_send_user_email' %}" method="post">
                            {% csrf_token %}
                            <div class="modal-body">
                                <input class="form-control mb-4" name="email" value="{{user.email}}" readonly>
                                <input class="form-control my-4" name="subject"
                                    placeholder="write subject here e.g Alert message">
                                <textarea class="form-control" rows="5" name="message"
                                    placeholder="write your message here"></textarea>

                            </div>
                            <div class="modal-footer">
                                {% if user.is_staff %}
                                <a href="{% url 'access' user.id  'revert' %}"><button type="button"
                                        class="btn-danger btn">Revert
                                        Access</button></a>
                                {% else %}
                                <a href="{% url 'access' user.id  'grant' %}"><button type="submit"
                                        class="btn border rounded text-white" style="background-color: #754C28;">Send
                                        Now</button></a>
                                {% endif %}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% endblock content %}