{% block styles %}

<style>

    .keyboards {
        display: block;
        margin-bottom: 250px;
    }

    .keyboard-row button {
        cursor: inherit;
        border-radius: 3px;
        height: 100%;
        background-color: #404040;
    }

    .keyboard-row {
        height: 60px;
        display: grid;
        column-gap: 3px;
        margin-bottom: 3px;
    }

    .keyboard-row>button, button:active {
        outline:none;
        border: none;
    }

    .keyboard-row1 {
        grid-template-columns: repeat(13, 1fr) 2fr 1fr;
    }

    .keyboard-row2 {
        grid-template-columns: 1.5fr repeat(12, 1fr) 1.5fr 1fr;
    }

    .keyboard-row3 {
        grid-template-columns: 1.75fr repeat(11, 1fr) 2.25fr 1fr;
    }

    .keyboard-row4 {
        grid-template-columns: 2.25fr repeat(10, 1fr) 1.75fr repeat(2, 1fr);
    }

    .keyboard-row5 {
        grid-template-columns: repeat(3, 1.25fr) 6.25fr repeat(6, 1fr);
    }


    .keyboard-iso-row1 {
        grid-template-columns: repeat(13, 1fr) 2fr 1fr;
    }

    .keyboard-iso-row2 {
        grid-template-columns: 1.5fr repeat(12, 1fr) 1.5fr 1fr;
    }

    .keyboard-iso-row3 {
        grid-template-columns: 1.75fr repeat(12, 1fr) 1.25fr 1fr;
    }

    .keyboard-iso-row4 {
        grid-template-columns: 1.25fr repeat(11, 1fr) 1.75fr repeat(2, 1fr);
    }

    .keyboard-iso-row5 {
        grid-template-columns: 1.23fr repeat(2, 1.25fr) 6.25fr repeat(6, 0.97fr);
    }

    button.enter-row3 {
        position: relative;
        height: 109%!important;
        margin-top: -5px;
        border-top-left-radius: 0!important;
        border-top-right-radius: 0!important;
        border-top: 0!important;
    }

    button.enter-row3 p{
        position: absolute;
        top: -8px;
        left: 19px;
    }

    button.enter-row2 {
        border-bottom-right-radius: 0!important;
        position: relative;
    }


    .keyboard-title {
        font-size: 40px;
        font-weight: bolder;
        text-align: center;
    }

    .products-config {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }



</style>
{% endblock %}

{% for item in field.value %}

    <div class="products-config">

        {% for po in item.po %}
            <div>
                <img src="/assets/images/products/{{ po.image }}" class="img-fluid resize">
                <p style="text-align: center; font-size: 18px">x {{ po.amount }}</p>
            </div>
        {% endfor %}

    </div>

    <div class="keyboards">
        {% if item.caseType == 'ANSI' %}

            <div class="keyboard-switch-{{ item.id }}">

                <p class="keyboard-title">Configurations des switchs</p>
                <div class="keyboard-row keyboard-row1">
                    <button keyId="ESC">ESC</button>
                    <button keyId="1">1</button>
                    <button keyId="2">2</button>
                    <button keyId="3">3</button>
                    <button keyId="4">4</button>
                    <button keyId="5">5</button>
                    <button keyId="6">6</button>
                    <button keyId="7">7</button>
                    <button keyId="8">8</button>
                    <button keyId="9">9</button>
                    <button keyId="0">0</button>
                    <button keyId="]">]</button>
                    <button keyId="+">+</button>
                    <button keyId="BACK">BACK</button>
                    <button keyId="~">~</button>
                </div>

                <div class="keyboard-row keyboard-row2">
                    <button keyId="TAB">TAB</button>
                    <button keyId="A">A</button>
                    <button keyId="Z">Z</button>
                    <button keyId="E">E</button>
                    <button keyId="R">R</button>
                    <button keyId="T">T</button>
                    <button keyId="Y">Y</button>
                    <button keyId="U">U</button>
                    <button keyId="I">I</button>
                    <button keyId="O">O</button>
                    <button keyId="P">P</button>
                    <button keyId="^">^</button>
                    <button keyId="€">€</button>
                    <button keyId="BACKSLASH">\</button>
                    <button keyId="U2">U</button>
                </div>

                <div class="keyboard-row keyboard-row3">
                    <button keyId="CAPS">CAPS</button>
                    <button keyId="Q">Q</button>
                    <button keyId="S">S</button>
                    <button keyId="D">D</button>
                    <button keyId="F">F</button>
                    <button keyId="G">G</button>
                    <button keyId="H">H</button>
                    <button keyId="J">J</button>
                    <button keyId="K">K</button>
                    <button keyId="L">L</button>
                    <button keyId="M">M</button>
                    <button keyId="PERCENT">%</button>
                    <button keyId="ENTER">ENTER</button>
                    <button keyId="D2">D</button>
                </div>

                <div class="keyboard-row keyboard-row4">
                    <button keyId="SHIFT">SHIFT</button>
                    <button keyId="W">W</button>
                    <button keyId="X">X</button>
                    <button keyId="C">C</button>
                    <button keyId="V">V</button>
                    <button keyId="B">B</button>
                    <button keyId="N">N</button>
                    <button keyId="INTERROGATION">?</button>
                    <button keyId="DOT">.</button>
                    <button keyId="SLASH">/</button>
                    <button keyId="§">§</button>
                    <button keyId="SHIFT2">SHIFT</button>
                    <button keyId="UP"><fa-icon [icon]="faArrowUp"></fa-icon></button>
                    <button keyId="D3">D</button>
                </div>

                <div class="keyboard-row keyboard-row5">
                    <button keyId="CTRL">CTRL</button>
                    <button keyId="SUP">SUP</button>
                    <button keyId="ALT">ALT</button>
                    <button keyId="SPACE">SPACE</button>
                    <button keyId="ALTGR">ALTGR</button>
                    <button keyId="FN">FN</button>
                    <button keyId="FILE">Č</button>
                    <button keyId="LEFT"><fa-icon [icon]="faArrowLeft"></fa-icon></button>
                    <button keyId="DOWN"><fa-icon [icon]="faArrowDown"></fa-icon></button>
                    <button keyId="RIGHT"><fa-icon [icon]="faArrowRight"></fa-icon></button>
                </div>
            </div>

            <div class="keyboard-caps-{{ item.id }}">
                <p class="keyboard-title">Configurations des touches</p>
                <div class="keyboard-row keyboard-row1">
                    <button keyId="ESC">ESC</button>
                    <button keyId="1">1</button>
                    <button keyId="2">2</button>
                    <button keyId="3">3</button>
                    <button keyId="4">4</button>
                    <button keyId="5">5</button>
                    <button keyId="6">6</button>
                    <button keyId="7">7</button>
                    <button keyId="8">8</button>
                    <button keyId="9">9</button>
                    <button keyId="0">0</button>
                    <button keyId="]">]</button>
                    <button keyId="+">+</button>
                    <button keyId="BACK">BACK</button>
                    <button keyId="~">~</button>
                </div>

                <div class="keyboard-row keyboard-row2">
                    <button keyId="TAB">TAB</button>
                    <button keyId="A">A</button>
                    <button keyId="Z">Z</button>
                    <button keyId="E">E</button>
                    <button keyId="R">R</button>
                    <button keyId="T">T</button>
                    <button keyId="Y">Y</button>
                    <button keyId="U">U</button>
                    <button keyId="I">I</button>
                    <button keyId="O">O</button>
                    <button keyId="P">P</button>
                    <button keyId="^">^</button>
                    <button keyId="€">€</button>
                    <button keyId="BACKSLASH">\</button>
                    <button keyId="U2">U</button>
                </div>

                <div class="keyboard-row keyboard-row3">
                    <button keyId="CAPS">CAPS</button>
                    <button keyId="Q">Q</button>
                    <button keyId="S">S</button>
                    <button keyId="D">D</button>
                    <button keyId="F">F</button>
                    <button keyId="G">G</button>
                    <button keyId="H">H</button>
                    <button keyId="J">J</button>
                    <button keyId="K">K</button>
                    <button keyId="L">L</button>
                    <button keyId="M">M</button>
                    <button keyId="PERCENT">%</button>
                    <button keyId="ENTER">ENTER</button>
                    <button keyId="D2">D</button>
                </div>

                <div class="keyboard-row keyboard-row4">
                    <button keyId="SHIFT">SHIFT</button>
                    <button keyId="W">W</button>
                    <button keyId="X">X</button>
                    <button keyId="C">C</button>
                    <button keyId="V">V</button>
                    <button keyId="B">B</button>
                    <button keyId="N">N</button>
                    <button keyId="INTERROGATION">?</button>
                    <button keyId="DOT">.</button>
                    <button keyId="SLASH">/</button>
                    <button keyId="§">§</button>
                    <button keyId="SHIFT2">SHIFT</button>
                    <button keyId="UP"><fa-icon [icon]="faArrowUp"></fa-icon></button>
                    <button keyId="D3">D</button>
                </div>

                <div class="keyboard-row keyboard-row5">
                    <button keyId="CTRL">CTRL</button>
                    <button keyId="SUP">SUP</button>
                    <button keyId="ALT">ALT</button>
                    <button keyId="SPACE">SPACE</button>
                    <button keyId="ALTGR">ALTGR</button>
                    <button keyId="FN">FN</button>
                    <button keyId="FILE">Č</button>
                    <button keyId="LEFT"><fa-icon [icon]="faArrowLeft"></fa-icon></button>
                    <button keyId="DOWN"><fa-icon [icon]="faArrowDown"></fa-icon></button>
                    <button keyId="RIGHT"><fa-icon [icon]="faArrowRight"></fa-icon></button>
                </div>
            </div>

        {% else %}

            <div class="keyboard-switch-{{ item.id }}">
                <p class="keyboard-title">Configurations des switchs</p>
                <div class="keyboard-row keyboard-iso-row1">
                    <button keyId="ESC">ESC</button>
                    <button keyId="1">1</button>
                    <button keyId="2">2</button>
                    <button keyId="3">3</button>
                    <button keyId="4">4</button>
                    <button keyId="5">5</button>
                    <button keyId="6">6</button>
                    <button keyId="7">7</button>
                    <button keyId="8">8</button>
                    <button keyId="9">9</button>
                    <button keyId="0">0</button>
                    <button keyId="]">]</button>
                    <button keyId="+">+</button>
                    <button keyId="BACK">BACK</button>
                    <button keyId="~">~</button>
                </div>

                <div class="keyboard-row keyboard-iso-row2">
                    <button keyId="TAB">TAB</button>
                    <button keyId="A">A</button>
                    <button keyId="Z">Z</button>
                    <button keyId="E">E</button>
                    <button keyId="R">R</button>
                    <button keyId="T">T</button>
                    <button keyId="Y">Y</button>
                    <button keyId="U">U</button>
                    <button keyId="I">I</button>
                    <button keyId="O">O</button>
                    <button keyId="P">P</button>
                    <button keyId="^">^</button>
                    <button keyId="€">€</button>
                    <button keyId="ENTER" class="enter-row2 enter-key"></button>
                    <button keyId="U2">U</button>
                </div>

                <div class="keyboard-row keyboard-iso-row3">
                    <button keyId="CAPS">CAPS</button>
                    <button keyId="Q">Q</button>
                    <button keyId="S">S</button>
                    <button keyId="D">D</button>
                    <button keyId="F">F</button>
                    <button keyId="G">G</button>
                    <button keyId="H">H</button>
                    <button keyId="J">J</button>
                    <button keyId="K">K</button>
                    <button keyId="L">L</button>
                    <button keyId="M">M</button>
                    <button keyId="PERCENT">%</button>
                    <button keyId="AT">@</button>
                    <button keyId="ENTER" class="enter-row3 enter-key"><p>ENTER</p></button>
                    <button keyId="D2">D</button>
                </div>

                <div class="keyboard-row keyboard-iso-row4">
                    <button keyId="SHIFT">SHIFT</button>
                    <button keyId="UNDERSUP"><</button>
                    <button keyId="W">W</button>
                    <button keyId="X">X</button>
                    <button keyId="C">C</button>
                    <button keyId="V">V</button>
                    <button keyId="B">B</button>
                    <button keyId="N">N</button>
                    <button keyId="INTERROGATION">?</button>
                    <button keyId="DOT">.</button>
                    <button keyId="SLASH">/</button>
                    <button keyId="§">§</button>
                    <button keyId="SHIFT2">SHIFT</button>
                    <button keyId="UP"><fa-icon [icon]="faArrowUp"></fa-icon></button>
                    <button keyId="D3">D</button>
                </div>

                <div class="keyboard-row keyboard-iso-row5">
                    <button keyId="CTRL">CTRL</button>
                    <button keyId="SUP">SUP</button>
                    <button keyId="ALT">ALT</button>
                    <button keyId="SPACE">SPACE</button>
                    <button keyId="ALTGR">ALTGR</button>
                    <button keyId="FN">FN</button>
                    <button keyId="FILE">Č</button>
                    <button keyId="LEFT"><fa-icon [icon]="faArrowLeft"></fa-icon></button>
                    <button keyId="DOWN"><fa-icon [icon]="faArrowDown"></fa-icon></button>
                    <button keyId="RIGHT"><fa-icon [icon]="faArrowRight"></fa-icon></button>
                </div>
            </div>

            <div class="keyboard-caps-{{ item.id }}">
                <p class="keyboard-title">Configurations des touches</p>
                <div class="keyboard-row keyboard-iso-row1">
                    <button keyId="ESC">ESC</button>
                    <button keyId="1">1</button>
                    <button keyId="2">2</button>
                    <button keyId="3">3</button>
                    <button keyId="4">4</button>
                    <button keyId="5">5</button>
                    <button keyId="6">6</button>
                    <button keyId="7">7</button>
                    <button keyId="8">8</button>
                    <button keyId="9">9</button>
                    <button keyId="0">0</button>
                    <button keyId="]">]</button>
                    <button keyId="+">+</button>
                    <button keyId="BACK">BACK</button>
                    <button keyId="~">~</button>
                </div>

                <div class="keyboard-row keyboard-iso-row2">
                    <button keyId="TAB">TAB</button>
                    <button keyId="A">A</button>
                    <button keyId="Z">Z</button>
                    <button keyId="E">E</button>
                    <button keyId="R">R</button>
                    <button keyId="T">T</button>
                    <button keyId="Y">Y</button>
                    <button keyId="U">U</button>
                    <button keyId="I">I</button>
                    <button keyId="O">O</button>
                    <button keyId="P">P</button>
                    <button keyId="^">^</button>
                    <button keyId="€">€</button>
                    <button keyId="ENTER" class="enter-row2 enter-key"></button>
                    <button keyId="U2">U</button>
                </div>

                <div class="keyboard-row keyboard-iso-row3">
                    <button keyId="CAPS">CAPS</button>
                    <button keyId="Q">Q</button>
                    <button keyId="S">S</button>
                    <button keyId="D">D</button>
                    <button keyId="F">F</button>
                    <button keyId="G">G</button>
                    <button keyId="H">H</button>
                    <button keyId="J">J</button>
                    <button keyId="K">K</button>
                    <button keyId="L">L</button>
                    <button keyId="M">M</button>
                    <button keyId="PERCENT">%</button>
                    <button keyId="AT">@</button>
                    <button keyId="ENTER" class="enter-row3 enter-key"><p>ENTER</p></button>
                    <button keyId="D2">D</button>
                </div>

                <div class="keyboard-row keyboard-iso-row4">
                    <button keyId="SHIFT">SHIFT</button>
                    <button keyId="UNDERSUP"><</button>
                    <button keyId="W">W</button>
                    <button keyId="X">X</button>
                    <button keyId="C">C</button>
                    <button keyId="V">V</button>
                    <button keyId="B">B</button>
                    <button keyId="N">N</button>
                    <button keyId="INTERROGATION">?</button>
                    <button keyId="DOT">.</button>
                    <button keyId="SLASH">/</button>
                    <button keyId="§">§</button>
                    <button keyId="SHIFT2">SHIFT</button>
                    <button keyId="UP"><fa-icon [icon]="faArrowUp"></fa-icon></button>
                    <button keyId="D3">D</button>
                </div>

                <div class="keyboard-row keyboard-iso-row5">
                    <button keyId="CTRL">CTRL</button>
                    <button keyId="SUP">SUP</button>
                    <button keyId="ALT">ALT</button>
                    <button keyId="SPACE">SPACE</button>
                    <button keyId="ALTGR">ALTGR</button>
                    <button keyId="FN">FN</button>
                    <button keyId="FILE">Č</button>
                    <button keyId="LEFT"><fa-icon [icon]="faArrowLeft"></fa-icon></button>
                    <button keyId="DOWN"><fa-icon [icon]="faArrowDown"></fa-icon></button>
                    <button keyId="RIGHT"><fa-icon [icon]="faArrowRight"></fa-icon></button>
                </div>
            </div>

        {% endif %}


    </div>

{% endfor %}



{% block scripts %}

    <script>

        {% for value in field.value %}

            {% for key in value.configJson %}

                {% if key.key is same as('ENTER') and value.caseType == 'ISO' %}

                    enterSwitch = document.querySelector(`.keyboard-switch-{{ value.id }} .enter-row3`);

                    enterSwitch.style.border = 'solid 2px {{ key.colorS }}';

                    enterCaps = document.querySelector(`.keyboard-caps-{{ value.id }} .enter-row3`);

                    enterCaps.style.border = 'solid 2px {{ key.colorC }}';

                {% endif %}

                buttonSwitch = document.querySelector(`.keyboard-switch-{{ value.id }} [keyid='{{ key.key }}']`)

                buttonSwitch.style.border = 'solid 2px {{ key.colorS }}';

                buttonCaps = document.querySelector(`.keyboard-caps-{{ value.id }} [keyid='{{ key.key }}']`)

                buttonCaps.style.border = '2px solid {{ key.colorC }}';
            {% endfor %}


        {% endfor %}
    </script>

{% endblock %}