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

{% block title %}Hello OptionsController!{% endblock %}

{% block body %}
    <div class="container w-75 mt-5">
        <div class="container">

            <div class="container w-75 d-flex justify-content-center my-4">
                <h1 class="">Les options</h1>
            </div>

            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#professions">Les professions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#statii">Les statuts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#skills">Les niveaux de compétence</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#experiences">Les types d'expérience</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#documents">Les types de document</a>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content d-flex justify-content-center my-5">
                <div class="w-100 tab-pane fade p-4 show active" id="professions">
                    <div class="container w-75">
                        <div class="d-flex justify-content-center flex-column">
                            <table class="table table-hover w-100">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Nom</div>
                                        </th>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Gérer la profession</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for profession in professions %}
                                        <tr class="table-light">
                                            <th class="d-flex justify-content-center w-100 fs-5">
                                                <div>{{ profession.name }}</div>
                                            </th>
                                            <td>
                                                <div class="d-flex justify-content-center w-100">
                                                    <a href="{{ path('modify_options', {'id': profession.id}) }}" style="margin-right: 30px;">
                                                        <i class="fas fa-pencil-alt" style="color: black;"></i>
                                                    </a>
                                                    <a href="{{ path('delete_options', {'id': profession.id}) }}">
                                                        <i class="far fa-trash-alt" style="color: black"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="btn btn-primary btn-lg mt-4">
                                    <a href="{{ path('add_options') }}" style="color: white; padding: 2px; text-decoration: none;">Ajouter un niveau</a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-100 tab-pane fade p-4" id="statii">
                    <div class="container w-75">
                        <div class="d-flex justify-content-center flex-column">
                            <table class="table table-hover w-100">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Nom</div>
                                        </th>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Gérer le statut</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for status in statii %}
                                        <tr class="table-light">
                                            <th class="d-flex justify-content-center w-100 fs-5">
                                                <div>{{ status.name }}</div>
                                            </th>
                                            <td>
                                                <div class="d-flex justify-content-center w-100">
                                                    <a href="{{ path('modify_options', {'id': status.id}) }}" style="margin-right: 30px;">
                                                        <i class="fas fa-pencil-alt" style="color: black;"></i>
                                                    </a>
                                                    <a href="{{ path('delete_options', {'id': status.id}) }}">
                                                        <i class="far fa-trash-alt" style="color: black"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="btn btn-primary btn-lg mt-4">
                                    <a href="{{ path('add_options') }}" style="color: white; padding: 2px; text-decoration: none;">Ajouter un niveau</a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-100 tab-pane fade p-4" id="skills">
                    <div class="container w-75">
                        <div class="d-flex justify-content-center flex-column">
                            <table class="table table-hover w-100">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Niveau</div>
                                        </th>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Gérer le niveau</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for skill_level in skill_levels %}
                                        <tr class="table-light">
                                            <th class="d-flex justify-content-center w-100 fs-5">
                                                <div>{{ skill_level.status }}</div>
                                            </th>
                                            <td>
                                                <div class="d-flex justify-content-center w-100">
                                                    <a href="{{ path('modify_options', {'id': skill_level.id}) }}" style="margin-right: 30px;">
                                                        <i class="fas fa-pencil-alt" style="color: black;"></i>
                                                    </a>
                                                    <a href="{{ path('delete_options', {'id': skill_level.id}) }}">
                                                        <i class="far fa-trash-alt" style="color: black"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="btn btn-primary btn-lg mt-4">
                                    <a href="{{ path('add_options') }}" style="color: white; padding: 2px; text-decoration: none;">Ajouter un niveau</a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-100 tab-pane fade p-4" id="experiences">
                    <div class="container w-75">
                        <div class="d-flex justify-content-center flex-column">
                            <table class="table table-hover w-100">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Type</div>
                                        </th>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Gérer le type</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for experience_type in experience_types %}
                                        <tr class="table-light">
                                            <th class="d-flex justify-content-center w-100 fs-5">
                                                <div>{{ experience_type.name }}</div>
                                            </th>
                                            <td>
                                                <div class="d-flex justify-content-center w-100">
                                                    <a href="{{ path('modify_options', {'id': experience_type.id}) }}" style="margin-right: 30px;">
                                                        <i class="fas fa-pencil-alt" style="color: black;"></i>
                                                    </a>
                                                    <a href="{{ path('delete_options', {'id': experience_type.id}) }}">
                                                        <i class="far fa-trash-alt" style="color: black"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="btn btn-primary btn-lg mt-4">
                                    <a href="{{ path('add_options') }}" style="color: white; padding: 2px; text-decoration: none;">Ajouter un type</a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-100 tab-pane fade p-4" id="documents">
                    <div class="container w-75">
                        <div class="d-flex justify-content-center flex-column">
                            <table class="table table-hover w-100">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Type</div>
                                        </th>
                                        <th scope="col">
                                            <div class="d-flex justify-content-center w-100">Gérer le type</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for document_type in document_types %}
                                        <tr class="table-light">
                                            <th class="d-flex justify-content-center w-100 fs-5">
                                                <div>{{ document_type.name }}</div>
                                            </th>
                                            <td>
                                                <div class="d-flex justify-content-center w-100">
                                                    <a href="{{ path('modify_options', {'id': document_type.id}) }}" style="margin-right: 30px;">
                                                        <i class="fas fa-pencil-alt" style="color: black;"></i>
                                                    </a>
                                                    <a href="{{ path('delete_options', {'id': document_type.id}) }}">
                                                        <i class="far fa-trash-alt" style="color: black"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center">
                                <button type="button" class="btn btn-primary btn-lg mt-4">
                                    <a href="{{ path('add_options') }}" style="color: white; padding: 2px; text-decoration: none;">Ajouter un type</a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock %}