{% extends 'base.html.twig' %}

{% block title %}Zprávy{% endblock %}

{% block body %}

    <h2>Zprávy</h2>

    <hr>

    <div class="btn-group">
        <a href="{{ path('zprava.create', {prijemce: 2}) }}" class="btn btn-outline-primary float-left">Nová Zpráva</a>
    </div>

    <hr>

    <div class="shadow-lg" style="min-width: 1000px">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ path('zprava.index') }}">Doručené Zprávy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ path('zprava.odeslane')}}">Odeslané Zprávy</a>
                    </li>
                </ul>
            </div>

            <div class="tab-content">
                <div id="tridy" class="card-body tab-pane active">

                    <br>

                    <main id="accordion">

                        {% for zprava in zpravy %}

                            <section id="{{ zprava.id }}" class="card shadow">
                                <a href="{{ '#' ~ zprava.id }}" class="card-header"><h5
                                            class="card-title h6">{{ zprava.predmet }}</h5></a>
                                <div class="card-body shadow-sm">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="basic-addon1">Od: {{ zprava.odesilatel }}</span>
                                        </div>
                                    </div>

                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Datum odeslání: {{ zprava.datodesl|date('d-m-Y') }}</span>
                                        </div>
                                    </div>

                                    <textarea readonly class="form-control" aria-label="textarea" rows="6">
                                            {{ zprava.text }}
                                    </textarea>

                                    <br>

                                    <a href="{{ path('zprava.create', {prijemce: zprava.odesilatel.id}) }}" class="btn btn-outline-primary float-left">Odpovědět</a>

                                </div>
                            </section>

                        {% endfor %}

                    </main>

                </div>
            </div>
        </div>
    </div>



    <style>
        #accordion section div {
            display: none;
            text-align: center;
        }

        #accordion section a {
            text-align: center;
            color: black;
            text-decoration: none;
        }

        #accordion section a:hover {
            text-decoration: none;
        }

        #accordion section:target div {
            display: block;
        }
    </style>

{% endblock %}
