{% extends "kaehmy_base.html" %}

{% load static %}
{% load i18n %}

{% block navigation %}
    {% include "kaehmy_navigation.html" %}
{% endblock %}

{% block content %}
<script>
    function commentOn(id, op) {
        setTimeout(function() {
            document.getElementById("commentNameField").focus();            
        }, 50);

        document.getElementById("collapse_add_comment").scrollIntoView(); 
        document.getElementById("commentOP").innerHTML = op;        
        document.getElementById("commentId").value = id;
    }
</script>
<div>
    <div>
        <h2 style="padding-top: 1rem">{% trans "All kaehmys" %}</h2>
    </div>

    <div class="collapse" id="collapse_add_comment">                    
        <div class="card">
            <div class="card-block">
                <form method="POST" action="/kaehmy/add_comment" class="form">{% csrf_token %}
                    <div class="form-group">
                        {% trans "Commenting on post by " %} <span id="commentOP"></span>
                        <input type="hidden" name="parent" id="commentId">
                    </div>
                    <div class="form-group">
                        <label>{% trans "Name" %}</label>
                        <input id="commentNameField" name="name" type="text" class="form-control" placeholder="Teemu Teekkari">
                    </div>
                    <div class="form-group">
                        <label>{% trans "Email" %}</label>
                        <input name="email" type="email" class="form-control" placeholder="teemu@teekka.ri">
                    </div>
                    <div class="form-group">
                        <label>{% trans "Comment" %}</label>
                        <textarea name="message" class="form-control" rows=3 placeholder="Hei!"></textarea>
                        </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value={% trans "Send" %}>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div>
        <form class="role-filter-form form-inline" method="GET">
            <label><strong>{% trans "Filter kaehmys" %}:</strong></label>
            <select onchange="this.form.submit()" name="role" class="form-control">
                <option value="-1">{% trans "All kaehmys" %}</option>
                {% for option in filter_options %}
                <option value={{ option.0 }} {% if request.GET.role|slugify == option.0|slugify %} selected="selected"{% endif %}>
                    {{ option.1 }} ({{ option.2 }})
                </option>
                {% endfor %}
            </select>
        </form>
    </div>

    <div>
        <h6 style="padding-bottom: 1rem">{% trans "Total kaehmys:" %} {{ application_count }}</h6>
    </div>
    

    {% for application in applications %}
    <div class="card">
        <h4 class="card-header">{{ application.name }}</h4>            
        <div class="card-block">
            {% if application.board_roles|length > 0 %}
                <h5 style="padding-bottom: 1rem" class="card-subtitle mb-2 text-muted">{{ application.board_roles }}</h5>                
            {% endif %}
            {% if application.official_roles|length > 0 %}
                <h5 style="padding-bottom: 1rem" class="card-subtitle mb-2 text-muted">{{ application.official_roles }}</h5>                
            {% endif %}        
            <p class="card-text">{{ application.text|linebreaks }}</p>

            {% if application.comment_count > 0 %}
                <a type="button" style="cursor: pointer" data-toggle="collapse" data-target="#collapse_{{ application.id }}" aria-expanded="false" aria-controls="collapse_{{ application.id }}">
                    {% trans "Show comments" %} ({{ application.comment_count }})
                </a>
            {% endif %}

            <div>
                <a type="button" onclick="commentOn({{ application.id }}, '{{ application.name }}')" style="cursor: pointer" data-toggle="collapse" data-target="#collapse_add_comment" aria-expanded="false" aria-controls="collapse_add_comment">
                    {% trans "Add comment" %}
                </a>
            </div>

            <div class="collapse" id="collapse_{{ application.id }}">                    
                {% for message in application.messages.all %}
                    {% include "kaehmy_message.html" with messages=message.messages.all %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}

</div>
{% endblock content %}