{% extends 'base.html.twig' %}
{% block title %}Old Exchange Rates
{% endblock %}
{% block stylesheets %} 
	{{ parent() }}
	{{encore_entry_link_tags('mainCSS')}}
     {{encore_entry_link_tags('dynaTableCSS')}}
    <style>
        .dynatable-per-page {
            float: left;
        }
        table{
            width:  100%;
            border-collapse: collapse;
        }
        .bg-blue{
            background-color: #2196F3 !important;
            color: white;
        }
        th{
            padding:15px 5px;
        }
    </style>
{% endblock %}
{% block body %}
    {{ include("mx/nav_menu.twig",{option:'exchange-rates'}) }}
    <main>
        <form class="row p-4" id="user-form">
            <div class="col-12 container-form white">
                <table class="highlight responsible-table" id="users-information" v-if="rates.length >0">
                    <thead class="bg-blue">
                        <tr>
                            <th width="20%">Currency from</th>
                            <th width="20%" >Currency to</th>
                            <th width="20%" >Currency value</th>
                            <th width="20%">Effective Date</th>
                            <th width="20%" >Source</th>
                        </tr>
                    </thead>
                    <tbody>
                          {% for exchange in exchanges %}
                            <tr>
                                <td>
                                    {{ exchange.currency_from }}
                                </td>
                                <td>
                                    {{ exchange.currency_to }}
                                </td>
                                <td>
                                    {{ exchange.currency_value }}
                                </td>
                                <td>
                                    {{ exchange.effective_date }}
                                </td>
                                <td>
                                    {{ exchange.source }}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </form>
    </main>
{% endblock %}

{% block javascripts %}
 <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
     {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}
    <script src="{{asset('js/complements/jquery.dynatable.js')}}" ></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            $("#users-information").dynatable();
        });
    </script>
    
   
{% endblock %}