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

{% block title %}Pokemon index{% endblock %}

{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('autocomplete/dist/css/autoComplete.css') }}">

    <style>
        .col-actions {
            text-align: center;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>Pokemon index</h1>

    <form action="/pokemon" method="get">
        <div class="row">
            <div class="col-md-7">
                <input id="autoComplete" tabindex="1" type="text" class="form-control" name="keyword" placeholder="Saisir un nom de pokemon, type, generation...">
            </div>
            <div class="col-auto">
                <button class="btn btn-primary">Rechercher <i class="fas fa-search"></i></button>
                <a href={{ path('pokemon_index') }}><button type="button" id="refreshPokemonListBtn" class="btn btn-secondary">Annuler filtre <i class="far fa-times-circle"></i></button></a>
            </div>

            <div class="col-auto">
                <a href="{{ path('pokemon_new') }}"><button type="button" class="btn btn-success">Create new <i class="far fa-plus-square"></i></button></a>
            </div>

        </div>
    </form>

    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Numero</th>
                <th scope="col">Nom</th>
                <th scope="col">Type 1</th>
                <th scope="col">Type 2</th>
                <th scope="col">Generation</th>
                <th scope="col">Vie</th>
                <th scope="col">Attaque</th>
                <th scope="col">Defense</th>
                <th scope="col">Legendaire</th>
                <th scope="col" class="col-actions">actions</th>
            </tr>
        </thead>
        <tbody>
        {% for pokemon in pokemon %}
            <tr>
                <td scope="row">{{ pokemon.numero }}.</td>
                <td scope="row">{{ pokemon.nom }} {% if pokemon.imageName %} <img style="margin-left: 5px;" src={{ asset('/images/pokemons/' ~ pokemon.imageName)}} alt="pokemon-img" height="30px"> {% endif %}</td>
                <td scope="row">{{ pokemon.type1.name }}</td>
                <td scope="row">{% if pokemon.type2 %} {{ pokemon.type2.name }} {% endif %}</td>
                <td scope="row">{{ pokemon.generation.name }}</td>
                <td scope="row">{{ pokemon.vie }}</td>
                <td scope="row">{{ pokemon.attaque }}</td>
                <td scope="row">{{ pokemon.defense }}</td>
                <td scope="row">{{ pokemon.legendaire ? 'Yes' : 'No' }}</td>
                <td scope="row" class="col-actions">
                    <a href="{{ path('pokemon_show', {'id': pokemon.id}) }}"> <button class="btn btn-secondary">show <i class="far fa-eye"></i></button></a>
                    <a href="{{ path('pokemon_edit', {'id': pokemon.id}) }}"> <button class="btn btn-primary">edit <i class="far fa-edit"></i></button></a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="8">no records found</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <div class="navigation d-flex justify-content-center">
        {{ knp_pagination_render(pokemon) }}
    </div>


    <script src={{ asset('js/customButton.js') }}></script>
    <script src={{ asset('autocomplete/dist/js/autoComplete.js') }}></script>
    <script type="module" src={{ asset('autocomplete/dist/js/index.js') }}></script>

{% endblock %}