{% extends 'selector/selector.html.twig' %}

{% block title %}TEST{% endblock %}

{% block legend %}Test Game Selector{% endblock %}
{% block content %}
    <div class="row text-center text-lg-left">
        {% for game in games %}
            {% if game.jackpot == NULL %}
                <div class="col-lg-3 col-md-4 col-6 gallery_product filter {{ game.gameVersion|slice(2,1) }} {{ game.name }}
                {% if game.reels != 5 or game.cols != 3 %}
                    custom_reels
                    {% endif %}">
                    <a href="#" type="button" data-toggle="modal"
                       data-target="#gameLaunchForm" data-guid="{{ game.gid }}"
                       data-game_name="{{ game.name }}" class="d-block mb-4 h-100">
                        <img class="img-fluid img-thumbnail" src="{{ asset('img/selector/') }}{{ game.name|lower }}.png"
                             alt="{{ game.name }}">
                    </a>
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}
{% block for_currency %}
    <div class="form-group">
        <label for="currency_value">Currency <small>Depends of settings</small></label>
        <select class="form-control" id="currency_value" onchange="changeFunction()">
            {% for currency in currencies %}
                <option {% if currency.name == 'EUR' %} selected {% endif %}
                        value="{{ currency.name }}">{{ currency.name }}</option>
            {% endfor %}
        </select>
    </div>
{% endblock %}
{% block javascripts_ext %}
    <script>
        const possible_guids = {{ possibleGuids|json_encode|replace({"'": "&#39;"})|raw }};
        const states = [{% for game in games %}
            '{{ game.name }}',
            {% endfor %}];
        const url = window.location.href;
        new QRCode(document.getElementById("qrcode"), url);

        function changeFunction() {
            var game_guid = possible_guids[document.getElementById("game_name").value][document.getElementById("jackpot_value").value];
            document.getElementById("game_guid").value = game_guid;
            check_guid(game_guid);
            document.getElementById("qrcode2").innerHTML = "";
            // TODO: add promo to url
            /*<?php echo $promo; ?>*/
            var url = '/launcher/dlv?gid=' + document.getElementById("game_guid").value + '&gt=' + document.getElementById("gt_value").value + '&lang=' + document.getElementById("language_value").value + '&cur=' + document.getElementById("currency_value").value + '&prd=dlv&pretesting={{ pretesting }}&token={{ token }}&iface=' + document.getElementById("theme_value").value + '&ts=' + document.getElementById("test_value").value;
            document.getElementById("launch_url").href = url;
            new QRCode(document.getElementById("qrcode2"), location.hostname + url);
        }

        $('#search').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            },
            {
                name: 'states',
                source: substringMatcher(states)
            });
    </script>
{% endblock %}