{% extends 'layout.twig' %}
{% block body %}
    {% include 'nav.twig' %}
    <style>
        span ul li:hover,.active {
            background: #007bff;
        }
    </style>
    <div class="container">
        <div class="row form-inline">
        <span class="col align-self-start">Show
        <select onchange="changepage({{ currentpage+1 }})" class="form-control">
            {% for i in [5,10,15,25,30] %}
                <option {% if i == amount_per_page%}selected{% endif%} value="{{ i }}">{{ i }}</option>

            {% endfor %}

        </select>
        </span>
            <span class="col align-self-end">
            Search
            <input class="form-control" onchange="changepage({{ 0 }},$(this).val())" value="{{ searchval }}" type="search">
                <button onclick="changepage({{ 0 }},$('input[type=search]').val())" type="button" class="button btn-primary">Search</button>
        </span>
        </div>

        <div class="row" style="overflow-x: auto;">
            <table class="table">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Address</th>
                </tr>
                </thead>
                <tbody>
                {% for i in contacts %}
                    <tr>
                        <th scope="row" style="max-width: 60px"  >
                            <img style="width: 100%" src="profile_pics/profile_{{ i.id }}" onerror="this.src='profile_pics/default'"/>
                        </th>
                        <td >{{ i.firstname }}</td>
                        <td>
                            {% for e in i.emails %}
                                {{ e }}<br>
                            {% endfor %}
                        </td>
                        <td>
                            {% for p in i.phones %}
                                {{ p[0] }}: {{ p[1] }}<br>
                            {% endfor %}
                        </td>
                        <td>
                            {% if i.address is iterable %}
                                {% for j in i.address %}
                                    {% if j|length >0 %}
                                        {{ j }}
                                        <br>
                                    {% endif %}

                                {% endfor %}
                            {% else %}
                                {{ i.address | raw }}
                            {% endif %}
                        </td>

                    </tr>
                {% endfor %}
                </tbody>
            </table>

        </div>
        <div class="row">
            <span class="col">
                <ul class="list-group list-group-horizontal justify-content-end">

                    {% for i in pageoptions%}
                        <li {% if i != currentpage%} onclick="changepage({{ i }})" {% endif%} class="list-group-item {% if i == currentpage %}active{% endif %}">{{ i+1 }}</li>
                    {% endfor %}
                </ul>
            </span>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
        function changepage(page,searchval = "") {
            let selected = $("option:selected").val();

            window.location.href = `contacts.php?page=${page}&amount_per_page=${selected}&search=${searchval}`;
        }
    </script>
{% endblock %}