{% extends "site_base.html" %}

{% block body_class %}authed pinax-cohorts{% endblock %}

{% block head_title %}{{ cohort.name }} cohort{% endblock %}

{% block body %}
    <div class="cohort-detail-container">
        <div class="cohort-detail">
            <h2>{{ cohort.name }}</h2>

            <table>
                <tr>
                    <th>Invite</th>
                    <th>Status</th>
                    <th>Sent At</th>
                </tr>
                {% for member in cohort.members %}
                    <tr>
                        <td class="cohort-email">
                            {{ member.email }}
                        </td>
                        <td class="cohort-email-status">
                            {% include "pinax/cohorts/_status.html" %}
                        </td>
                        <td class="cohort-email-sent">
                            {% if member.signup_code %}
                                {{ member.signup_code.sent }}
                            {% endif %}
                        </td>
                {% empty %}
                    <tr><td colspan="6" class="lead">No Cohort Members Yet</td></tr>
                {% endfor %}
            </table>

            <div class="meta">
                <div class="cohort-created">Created {{ cohort.created }}</div>
                <div class="cohort-stats">Users: {{ cohort.member_counts.users }} / Total: {{ cohort.member_counts.total }}</div>
            </div>

            {% if cohort.member_counts.pending %}
                <div class="pending-invites-container">
                    <form method="POST" action="{% url "pinax_cohorts:send_invitations" cohort.pk %}">
                        {% csrf_token %}
                        <button>
                            Send Out Invitations to {{ cohort.member_counts.pending }} {{ cohort.member_counts.pending|pluralize:"Person,People" }}
                        </button>
                    </form>
                </div>
            {% endif %}
        </div>

        <div class="cohort-actions-container">
            <div class="cohort-invite-container">
                <h3>Invite Email Address</h3>

                <form method="POST" action="{% url "pinax_cohorts:member_add" cohort.pk %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <input id="id_email" type="text" name="email" class="form-control input-md" maxlength="75" />
                    </div>
                    <div class="form-actions">
                        <button>Invite</button>
                    </div>
                </form>
            </div>

            <div class="cohort-invite-add-container">
                <h3>Waiting List ({{ waiting_list.count }})</h3>
                <form method="POST" action="{% url "pinax_cohorts:member_add" cohort.pk %}">
                    {% csrf_token %}
                    <div class="form-group">
                        Invite next <input type="number" min="1" name="invite_next" class="form-control"> people
                        <button><i class="fas fa-plus"></i></button>
                    </div>
                </form>
            </div>

            <div class="pending-invites-list-container">
                {% for item in waiting_list %}
                    <div class="waiting-list-item">
                        <div class="invitee">
                            {{ item.email }}
                        </div>
                        <div class="invitee-add-form">
                            <div class="entry-created">{{ item.created|date }}</div>
                            <form method="POST" action="{% url "pinax_cohorts:member_add" cohort.pk %}">
                                {% csrf_token %}
                                <input type="hidden" name="email" value="{{ item.email }}" />
                                <button><i class="fas fa-plus"></i> Add</button>
                            </form>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}