{{ extends "global/Page.html" }}

{{ block styles }}
    <link href="{% static 'global/css/decision.css' %}" rel="stylesheet">
    <style>
        .left {
            left: 15vw;
        }
        .right {
            left: 85vw;
        }
        .between-btn {
            transform: translate(-50%,-50%);
            top: 50vh;
            position: absolute;
            text-align: center;
            width: auto;
            height: auto;
        }

        .middle-content {
            transform: translate(-50%,-50%);
            top: 50vh;
            left: 50vw;
            position: absolute;
            text-align: center;
            display: flex;
            flex-direction: column;
            font-size: large;

        }
        .row {
            margin-top: 20px;
        }
        .table-item {
            font-size: x-large;
            font-weight: bold;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        // When page is loaded
        window.addEventListener('DOMContentLoaded', () => {
            document.getElementById('between-btn').classList.add(js_vars.position)
}       );
    </script>

{{ endblock }}

{{ block PageContent }}

<div class="middle-content" id="middle">
    <div> The employer you are choosing for: </div>
    <div class="row">
        {{ for attr in lAttr }}
            <div class="table-item"> {{ attr }} </div>
        {{ endfor }}
    </div>
</div>
<button type="button" class="between-btn" id="between-btn" onclick="endPage()"> Continue </button>


<input type="hidden" id="sStart" name="sStartCross">
<input type="hidden" id="sEnd" name="sEndCross">




{{ endblock }}