{% extends "jury/base.html.twig" %}
{% import "jury/jury_macros.twig" as macros %}

{% block title %}Testcases for p{{ problem.probid }} - {{ parent() }}{% endblock %}

{% block extrahead %}
    {{ parent() }}
    {{ macros.table_extrahead() }}
{% endblock %}

{% block content %}

    <h1>Testcases for p{{ problem.probid }} - {{ problem.name }}</h1>

    <div class="mb-2">
        <a href="{{ path('jury_problem', {'probId': problem.probid}) }}">Back to problem p{{ problem.probid }}</a>
    </div>

    <form method="post" enctype="multipart/form-data">

    {% if testcases is empty %}
        <p class="nodata">No testcase(s) yet.</p>
    {% else %}
        <table class="table table-sm table-striped table-hover testcases">
            <thead>
            <tr>
                {% if allowEdit %}
                    <th></th>
                {% endif %}
                <th class="testrank">#</th>
                <th class="testsample">sample</th>
                <th>download</th>
                <th>size</th>
                <th>md5</th>
                {% if allowEdit %}
                    <th>upload new</th>
                {% endif %}
                <th>description / image</th>
            </tr>
            </thead>
            <tbody>
            {% for rank, testcase in testcases %}
                <tr>
                    {% if allowEdit %}
                        <td rowspan="2">
                            <a href="{{  path('jury_testcase_delete', {'testcaseId': testcase.testcaseid}) }}"
                               title="delete testcase {{ testcase.testcaseid }}"
                               onclick="confirm('Proceed with the deletion of testcase {{ testcase.testcaseid }}?');">
                                <i class="fas fa-trash-alt"></i>
                            </a>
                        </td>
                    {% endif %}
                    <td rowspan="2" class="testrank">
                        {% if allowEdit %}
                            <a href="{{ path('jury_problem_testcase_move', {'probId': problem.probid, 'rank': testcase.rank, 'direction': 'up'}) }}"
                               title="Move testcase up"><i class="fas fa-arrow-up"></i></a><br>
                        {% endif %}
                        {{ testcase.rank }}
                        {% if allowEdit %}
                            <br>
                            <a href="{{ path('jury_problem_testcase_move', {'probId': problem.probid, 'rank': testcase.rank, 'direction': 'down'}) }}"
                               title="Move testcase down"><i class="fas fa-arrow-down"></i></a>
                        {% endif %}
                    </td>
                    <td rowspan="2" class="testsample">
                        <input type="checkbox" name="sample[{{ testcase.rank }}]" value="sample"
                               {% if testcase.sample %}checked{% endif %} />
                    </td>
                    <td class="filename">
                        <a href="{{ path('jury_problem_testcase_fetch', {'probId': problem.probid, 'rank': testcase.rank, 'type': 'input'}) }}">
                            {{ testcase.downloadName }}.{{ extensionMapping.input }}
                        </a>
                    </td>
                    <td class="size">
                        {{ testcaseData[testcase.rank].input_size | printSize }}
                    </td>
                    <td class="md5 small">
                        {{ testcase.md5sumInput }}
                    </td>
                    {% if allowEdit %}
                        <td><div class="input-group">
                            <label class="form-control text-truncate" for="update_input_{{testcase.rank}}" id="update_input_label_{{testcase.rank}}">new input file</label>
                            <input type="file" class="d-none custom-file-input" name="update_input[{{ testcase.rank }}]" id="update_input_{{testcase.rank}}">
                        </div></td>
                    {% endif %}
                    <td class="testdesc">
                        <span class="testcase-description">{{ testcase.description(true) | descriptionExpand }}</span>
                        {% if allowEdit %}
                            <textarea class="d-none form-control testcase-description-field" name="description[{{ testcase.rank }}]">{{ testcase.description(true) }}</textarea>
                            <button type="button" class="float-end testcase-edit-description btn btn-secondary btn-sm">Edit</button>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td class="filename">
                        <a href="{{ path('jury_problem_testcase_fetch', {'probId': problem.probid, 'rank': testcase.rank, 'type': 'output'}) }}">
                            {{ testcase.downloadName }}.{{ extensionMapping.output }}
                        </a>
                    </td>
                    <td class="size">
                        {{ testcaseData[testcase.rank].output_size | printSize }}
                    </td>
                    <td class="md5 small">
                        {{ testcase.md5sumOutput }}
                    </td>
                    {% if allowEdit %}
                        <td><div class="input-group">
                            <label class="form-control text-truncate" for="update_output_{{testcase.rank}}" id="update_output_label_{{testcase.rank}}">new output file</label>
                            <input type="file" class="d-none custom-file-input" name="update_output[{{ testcase.rank }}]" id="update_output_{{testcase.rank}}">
                        </div></td>
                    {% endif %}
                    <td class="testimage">
                        {% if testcaseData[testcase.rank].image_size > 0 %}
                            <a href="{{ path('jury_problem_testcase_fetch', {'probId': problem.probid, 'rank': testcase.rank, 'type': 'image'}) }}">
                                <span class="filename">p{{ problem.probid }}.t{{ testcase.rank }}.{{ testcaseData[testcase.rank].image_type }}</span>
                            </a>
                            {% if allowEdit %}
                            &nbsp;
                            <div class="input-group">
                                <label class="form-control text-truncate" for="update_image_{{testcase.rank}}" id="update_imapge_label_{{testcase.rank}}">replace image</label>
                                <input type="file" class="d-none custom-file-input" name="update_image[{{ testcase.rank }}]" id="update_image_{{testcase.rank}}" accept="image/*">
                            </div>
                            {% endif %}
                        {% else %}
                            {% if allowEdit %}
                            <div class="input-group">
                                <label class="form-control text-truncate" for="update_image_{{testcase.rank}}" id="update_imapge_label_{{testcase.rank}}">add an image</label>
                                <input type="file" class="d-none custom-file-input" name="update_image[{{ testcase.rank }}]" id="update_image_{{testcase.rank}}" accept="image/*">
                            </div>
                            {% else %}
                            <span class="nodata">No image</span>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}

    {% if allowEdit %}
        <h2>Create new testcase</h2>

        <div class="row mb-2">
            <label class="col-sm-2 col-form-label" for="add_input">Input testdata</label>
            <div class="col-sm-4">
                <input type="file" class="form-control" name="add_input" id="add_input">
            </div>
        </div>

        <div class="row mb-2">
            <label class="col-sm-2 col-form-label" for="add_output">Output testdata</label>
            <div class="col-sm-4">
                <input type="file" class="form-control" name="add_output" id="add_output">
            </div>
        </div>

        <div class="row mb-2">
            <div class="col-sm-2"></div>
            <div class="col-sm-4">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="add_sample" name="add_sample">
                    <label class="form-check-label" for="add_sample">Sample testcase</label>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <label for="add_desc" class="col-sm-2 col-form-label">Description</label>
            <div class="col-sm-4">
                <textarea name="add_desc" id="add_desc" rows="5" class="form-control"></textarea>
            </div>
        </div>

        <div class="row mb-2">
            <label class="col-sm-2 col-form-label" for="add_image">Image</label>
            <div class="col-sm-4">
                <input type="file" class="form-control" accept="image/*" name="add_image" id="add_image">
            </div>
        </div>

        <input type="submit" class="btn btn-primary mt-3" value="Submit all changes">
    {% endif %}

    </form>

    <script>
        $(function() {
            $('.testcase-edit-description').on('click', function() {
                var $button = $(this);
                var $description = $button.parent().find('.testcase-description');
                var $descriptionInput = $button.parent().find('.testcase-description-field');

                if ($description.hasClass('d-none')) {
                    $description.removeClass('d-none');
                    $descriptionInput.addClass('d-none');
                    $button.text('Edit');
                    $descriptionInput.val($description.text());
                } else {
                    $description.addClass('d-none');
                    $descriptionInput.removeClass('d-none');
                    $button.text('Cancel');
                }
            });
            $('.custom-file-input').change(function(e) {
                let fileName = (e.target.files.length > 0) ? e.target.files[0].name : 'new file';
                $(this).prev().text(fileName);
            });
        });
    </script>

{% endblock %}