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

{% block title %}
    Profil Rodiče
{% endblock %}

{% block body %}

    <div class="container-mt-3" style="min-width: 400px">

        <h3 class="h3 card-title mb-3 font-weight-normal">Profil Rodiče</h3>
        <h4 class="h4 card-title mb-3 font-weight-normal">{{ rodic.titul }} {{ rodic.jmeno }} {{ rodic.prijmeni }}</h4>

        <hr>

        <div class="d-flex justify-content-center">

            {% if rodic.image != NULL %}

                <img src="{{ '/uploads/' ~ rodic.image }}" alt="Profilový obrázek"
                     style="max-width: 200px; max-height: 300px; margin-right: 20px">

            {% endif %}



            <div id="InfoBox" class="shadow-sm card">

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Telefon: {{ rodic.telefon }}</li>
                    <li class="list-group-item">Email: {{ rodic.email }}</li>
                    <li class="list-group-item">
                        <ul class="list-group list-group-flush">
                            <li class="list-group"> Stát: {{ rodic.stat }}</li>
                            <li class="list-group">Obec: {{ rodic.obec }}</li>
                            <li class="list-group"> Městská část: {{ rodic.mCast }}</li>
                        </ul>
                    </li>
                    <li class="list-group-item">
                        <ul class="list-group list-group-flush">
                            <li class="list-group"> Ulice: {{ rodic.ulice }}</li>
                            <li class="list-group"> Čís. popisné: {{ rodic.cisPop }}</li>
                            <li class="list-group"> PSČ: {{ rodic.psc }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <hr>

        <div class="d-flex justify-content-center shadow-sm">
            <div id="Textbox" style="max-width: 400px;">

                 <span class = "h-70 card-title mb-5 font-weight-normal"> Děti: </span>

                <br>

                <div class="shadow" style="width: max-content;">
                    <table id="table" data-toggle="table" data-height="500"
                           class="table table-bordered table-borderless table-hover">
                        <thead class="thead-light">
                        <tr>
                            <th data-field="ID">ID</th>
                            <th data-field="ID">Jméno</th>
                            <th data-field="ID">Příjmení</th>
                            <th data-field="ID">Třída</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for zak in rodic.zak %}

                            <tr style="transform: rotate(0);">
                                <td scope="colgroup">
                                    <a href="{{ path('zak.show', {id: zak.id}) }}" class="stretched-link">{{ zak.id }}</a>
                                </td>
                                <td> {{ zak.jmeno}} </td>
                                <td> {{ zak.prijmeni}} </td>
                                <td> {{ zak.trida}} </td>
                            </tr>

                        {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <hr>
        {% if is_granted('ROLE_ADMIN') %}
            <div class="btn-group">
                <a href="{{ path('rodic.edit', {rodic: rodic.id}) }}" class="btn btn-outline-primary btn-group">Upravit</a>
                <a href="{{ path('rodic.add', {rodic: rodic.id}) }}" class="btn btn-outline-info btn-group">Přidat Dítě</a>
                <a href="{{ path('rodic.delete', {rodic: rodic.id}) }}" class="btn btn-outline-danger btn-group">Smazat</a>
            </div>
        {% endif %}

        {% if user != null %}
            <a href="{{ path('zprava.create', {prijemce: user.id}) }}" class="btn btn-outline-primary float-left">Poslat zprávu</a>
        {% endif %}

    </div>

{% endblock %}

