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

{% load otree static %}
{% load analytical %}
{% load widget_tweaks %}

{% block styles %}
    <style>
    .otree-body {
        background-color: white;
        color: black;
        width: 30%;
        height: 100%;
        position: fixed;
        z-index: 1;
        overflow-x: hidden;
        padding-top: 20px;
        top:0;
    }

    .otree-btn-next {
        background-colour: green;
    }
    .otree-title {
        color: black;
    }

    .form-control {
        border: 10px solid black;
        max-width: 100%;
    }

    .left {
        left: 0;
        background-color: white;
    }

    .right {
        height: 80%;
        position: fixed;
        width: 70%;
        top: 0;
        right: 0;
        background-color: white;
        overflow-x: hidden;
    }

    .right_bot {
        height: 150px;
        position: fixed;
        width: 70%;
        bottom: 0;
        right: 0;
        background-color: white;
        overflow-x: hidden;
    }


    .centered img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    centered {
        width: 100%;
        margin-left: 0;
    }

    table, td ,th {
        border: 3px solid black;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {

    }

    td {

    }

    tr {

    }

    table.right_bot2{
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        height: 100%;
    }

    td.right_bot2{
        height: 100px;
    }





    </style>
{% endblock %}

{% block title %}
{% analytical_head_top %}
    <div class="left", align = "center">

        <img src="{% static logo_path %}"  width=30%/>
        <p>
            Résumé Evaluation
        </p>
    </div>
{% analytical_head_bottom %}
{% endblock %}



{% block content %}
{% analytical_body_top %}
{{ form.submitted.errors }}


    <div class=" left">

        <td><button name="CV_to_view" value=0 class="btn btn-link btn-large">View Instructions</button></td>


        <div>
            <table>
                <tr>
                    <th>Resume Link</th>
                    <th>Name</th>
                    <th>Score</th>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=1 class="btn btn-link btn-large">Résumé 1</button></td>
                    <td>{{ form.Name_1 }}</td>
                    <td><input type="number" name="CV_1" step="any" min="0" max="10" id="id_CV_1" class="form-control" /></td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=2 class="btn btn-link btn-large">Résumé 2</button></td>
                    <td>{{ form.Name_2 }}</td>
                    <td>{{ form.CV_2 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=3 class="btn btn-link btn-large">Résumé 3</button></td>
                    <td>{{ form.Name_3 }}</td>
                    <td>{{ form.CV_3 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=4 class="btn btn-link btn-large">Résumé 4</button></td>
                    <td>{{ form.Name_4 }}</td>
                    <td>{{ form.CV_4 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=5 class="btn btn-link btn-large">Résumé 5</button></td>
                    <td>{{ form.Name_5 }}</td>
                    <td>{{ form.CV_5 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=6 class="btn btn-link btn-large">Résumé 6</button></td>
                    <td>{{ form.Name_6 }}</td>
                    <td>{{ form.CV_6 }}</td>
                </tr>
                {% comment %}
                <tr>
                    <td><button name="CV_to_view" value=7 class="btn btn-link btn-large">Résumé 7</button></td>
                    <td>{{ form.Name_7 }}</td>
                    <td>{{ form.CV_7 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=8 class="btn btn-link btn-large">Résumé 8</button></td>
                    <td>{{ form.Name_8 }}</td>
                    <td>{{ form.CV_8 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=9 class="btn btn-link btn-large">Résumé 9</button></td>
                    <td>{{ form.Name_9 }}</td>
                    <td>{{ form.CV_9 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=10 class="btn btn-link btn-large">Résumé 10</button></td>
                    <td>{{ form.Name_10 }}</td>
                    <td>{{ form.CV_10 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=11 class="btn btn-link btn-large">Résumé 11</button></td>
                    <td>{{ form.Name_11 }}</td>
                    <td>{{ form.CV_11 }}</td>
                </tr>
                <tr>
                    <td><button name="CV_to_view" value=12 class="btn btn-link btn-large">Résumé 12</button></td>
                    <td>{{ form.Name_12 }}</td>
                    <td>{{ form.CV_12 }}</td>
                </tr>
                {% endcomment %}

            </table>
        </div>

        <div class="left", align = "right">
            <button name="submitted" value="True" position="Right" class="btn btn-success btn-large">Submit</button>
        </div>

    </div>


    <div class="right">
        <div class="centered img">

            <img src="{% static image_path %}"  width=100%/>

        </div>
    </div>


    <div class="right_bot">
        <h2>Vertical (basic) formxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
        <form action="/action_page.php">
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
            </div>
        </form>
    </div>

    {% comment %}
    <div class="right_bot">
        <div>

            <table class="right_bot2">
                <tr>
                    <th>Notes for x</th>
                </tr>
                <tr>
                    <td> {{form.Notes_1|attr:"rows:1" |attr:"cols:200"}}</td>
                </tr>
            </table>

        </div>
    </div>
    {% endcomment %}

{% endblock %}

{% analytical_body_bottom %}



    {% comment %}
    position: absolute;
        transform: translate(0%, 0%);
        text-align: center;
        width: 50%;
    {{ form.as_table }}
    <a href="{% url 'my_view_1' %}">View CV One</a>
    {% formfield player.CV_2 label="Résumé 2" %}
    {% formfield player.CV_3 label="Résumé 3" %}
    {% formfield player.CV_4 label="Résumé 4" %}
    {% formfield player.CV_5 label="Résumé 5" %}
    {% formfield player.CV_6 label="Résumé 6" %}
    {% formfield player.CV_7 label="Résumé 7" %}
    {% formfield player.CV_8 label="Résumé 8" %}
    {% formfield player.CV_9 label="Résumé 9" %}
    {% formfield player.CV_10 label="Résumé 10" %}
    {% formfield player.CV_11 label="Résumé 11" %}
    {% formfield player.CV_12 label="Résumé 12" %}
    <button class="otree-btn-next btn btn-primary">Submit</button>
    {% endcomment %}

    {% comment %}
    <div class="container text-center">
      <a href="about-me.html" class="btn btn-info" role="button">Click here to find more about me</a>
    </div>
    <img src="{% static 'C:/Users/fo06mafa/oTree/_static/CV_test/Chronological_Resume_1_Output.jpg' %}"/>
    {% endcomment %}