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

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

{% block aabulletinboard_header %}
    {% translate "Bulletin Board" as translated_header %}
    {% include 'aa_bulletin_board/partials/header/h1.html' with header_text=translated_header %}
{% endblock %}

{% block aabulletinboard_body %}
    {% if perms.aa_bulletin_board.manage_bulletins %}
        <div class="aa-bulletin-board-management text-right">
            <a class="btn btn-success btn-read-more" href="{% url 'aa_bulletin_board:create_bulletin' %}">{% translate 'Add Bulletin' %}</a>
        </div>
    {% endif %}

    {% if bulletins %}
        <div class="row panels-equal-height">
            {% for bulletin in bulletins %}
                <div class="panel-bulletin-excerpt col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="panel-title">
                                {{ bulletin.title }}
                                {% if bulletin.groups.all %}
                                    <i class="far fa-eye-slash aa-bulletin-board-marker-group-restrictions" data-title="{% translate "This bulletin is restricted to the following group(s):" %}<br>{{ bulletin.groups.all|join:', ' }}"></i>
                                {% endif %}
                            </div>
                        </div>

                        <div class="panel-body">
                            {{ bulletin.content|safe }}
                        </div>

                        <div class="panel-footer-read-more-button panel-footer-no-background">
                            <p>
                                <a class="btn btn-primary btn-sm btn-read-more" href="{% url 'aa_bulletin_board:view_bulletin' bulletin.slug %}">{% translate 'Read more' %}</a>

                                {% if perms.aa_bulletin_board.manage_bulletins %}
                                    <a class="btn btn-warning btn-sm btn-read-more" href="{% url 'aa_bulletin_board:edit_bulletin' bulletin.slug %}">{% translate 'Edit' %}</a>
                                    <a class="btn btn-danger btn-sm btn-read-more" href="{% url 'aa_bulletin_board:remove_bulletin' bulletin.slug %}">{% translate 'Delete' %}</a>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}

{% block extra_javascript %}
    <script type="application/javascript">
        $(document).ready(function() {
            let resizeBulletinPanel = function () {
                let highestBox = 0;

                $('.panels-equal-height').each(function () {
                    $('.panel-bulletin-excerpt', this).each(function () {
                        let currentBulletinHeight = $(this).height();

                        if (currentBulletinHeight > highestBox) {
                            highestBox = currentBulletinHeight;
                        }
                    });

                    $('.panel-bulletin-excerpt', this).height(highestBox);
                });
            }

            resizeBulletinPanel();

            $(window).on('resize', function (e) {
                $('.panel-bulletin-excerpt').css({"height": ""});

                resizeBulletinPanel();
            });

            $(".aa-bulletin-board-marker-group-restrictions").tooltip({
                placement: 'bottom',
                html: true
            });
        });
    </script>
{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'aa_bulletin_board/css/aa-bootstrap-fix.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'aa_bulletin_board/css/aa-bulletin-board.min.css' %}" type="text/css">
{% endblock %}
