{% extends "base.html" %}

{% set active_page = "modules" %}

{% block subtitle %}
- {{ selected_module }} - Configure training
{% endblock %}

{% block content %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h2>Configure training: {% if module_meta['title'] is defined %}{{ module_meta['title'] }}{% else %}{{ modulename }}{% endif %}</h2>
</div>

{% include 'flashed_messages.html' %}

<div class="pt-3 pb-2 mb-3">
  Start by configuring the <b>General configuration</b>, as it will prefill the <b>Specific configuration</b> with proper values.
  Once you have this dialed out, you can proceed to finetune the <b>Specific configuration</b> to your needs (eg. increase number of CPUs).
</div>

<div class="accordion mb-3" id="accordion_config">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingGeneral">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGeneral" aria-expanded="true" aria-controls="collapseGeneral">
                General Configuration
            </button>
        </h2>
        <div id="collapseGeneral" class="accordion-collapse collapse show" aria-labelledby="headingGeneral">
            <div class="accordion-body">
                <form class="row g-3"  action="{{ url('module.train', module=selected_module) }}">

                    <div class="col-md-6">
                        <label for="selected_tosca" class="form-label"><strong>Template:</strong></label>
                        <select class="form-select" aria-label="Select an available template" id="selected_tosca" name="selected_tosca" onchange="this.form.submit()">
                    {% for v in general_configuration["tosca_templates"]["available"] %}
                        {% if v.lower() == general_configuration["tosca_templates"]["selected"]  %}
                                <option value="{{ v.lower() }}" selected>{{ v }}</option>
                        {% else %}
                                <option value="{{ v.lower() }}">{{ v }}</option>
                        {% endif %}
                    {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label for="run_command" class="form-label"><strong>Command:</strong></label>
                        <select class="form-select" aria-label="Select an available command to execute" id="run_command" name="run_command" onchange="this.form.submit()">
                    {% for v in general_configuration["run_command"]["available"] %}
                        {% if v.lower() == general_configuration["run_command"]["selected"]  %}
                                <option value="{{ v.lower() }}" selected>{{ v }}</option>
                        {% else %}
                                <option value="{{ v.lower() }}">{{ v }}</option>
                        {% endif %}
                    {% endfor %}
                        </select>
                      <small class="form-text">
                        When selecting DEEPaaS you won't be able to use JupyterLab, and vice versa.
                        If you want to have access to both services at the same time your best option is to deploy
                        with JupyterLab, then open a terminal window and run DEEPaaS yourself typing `deepaas-run`.
                      </small>
                    </div>

                    <div class="col-md-6">
                        <label for="hardware_configuration" class="form-label"><strong>Hardware configuration:</strong></label>
                        <select class="form-select" aria-label="Select an hardware configuration" id="hardware_configuration" name="hardware_configuration" onchange="this.form.submit()">
                    {% for v in general_configuration["hardware_configuration"]["available"] %}
                        {% if v.lower() == general_configuration["hardware_configuration"]["selected"]  %}
                                <option value="{{ v.lower() }}" selected>{{ v }}</option>
                        {% else %}
                                <option value="{{ v.lower() }}">{{ v }}</option>
                        {% endif %}
                    {% endfor %}
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label for="docker_tag" class="form-label"><strong>Docker tag:</strong></label>
                        <select class="form-select" aria-label="Select an available Docker tag" id="docker_tag" name="docker_tag" onchange="this.form.submit()">
                    {% for v in general_configuration["docker_tags"]["available"] %}
                        {% if v.lower() == general_configuration["docker_tags"]["selected"]  %}
                                <option value="{{ v.lower() }}" selected>{{ v }}</option>
                        {% else %}
                                <option value="{{ v.lower() }}">{{ v }}</option>
                        {% endif %}
                    {% endfor %}
                        </select>
                        <small class="form-text">
                          You should choose the appropriate tag for your selected hardware.
                          Check the <a href="https://marketplace.deep-hybrid-datacloud.eu/modules/{{ selected_module }}.html">module documentation</a> for more details if unsure.
                        </small>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <form class="mt-3" id="create-form" method="post" action="{{ url('deployments') }}">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingConfig">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfig" aria-expanded="true" aria-controls="collapseConfig">
                    Specific Configuration
                </button>
            </h2>
            <div id="collapseConfig" class="accordion-collapse collapse show" aria-labelledby="headingConfig">
                <div class="accordion-body">
                    <div class="row g-3">
                    {% for group, inputs in template_meta["grouped"].items() %}
                        <div class="mt-0 border-bottom">
                            <h5 class="mt-4">{{ group[0]|upper }}{{ group[1:] }} options:</h5>
                            <fieldset id="f-{{ group }}">
                                <div class="row g-3 mb-3">
                                {% for key, value in inputs.items() %}
                                    {% include 'modules/_input_types.html' %}
                                {% endfor %}
                                </div>
                            </fieldset>
                        </div>
                    {% endfor %}
                    </div>

                    <div class="mt-3 text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <a class="btn btn-primary btn-danger" href="{{ url('modules') }}" role="button">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingAdvanced">
                <button class="accordion-button collapsed text-danger" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="true" aria-controls="collapseAdvanced">
                    Advanced Configuration
                </button>
            </h2>
            <div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced">
                <div class="accordion-body">
                    <div class="row g-3">
                        <div class="mt-0 border-bottom">
                            <h5 class="mt-4">Template name</h5>
                            <fieldset id="f-template">
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <input class="form-control" id="template" name="template" type="text" value="{{ template_name }}" aria-label="TOSCA template" readonly>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="mt-0 border-bottom">
                            <h5 class="mt-4">Scheduling options:</h5>
                            <fieldset id="f-advanced">
                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <strong>Provider selection:</strong>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="extra_opts.schedtype" value="auto" id="radioSchedTypeAuto" checked>
                                            <label class="form-check-label" for="radioSchedTypeAuto">
                                                Automatic
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="extra_opts.schedtype" value="manual" id="radioSchedTypeManual" {% if not slas %}disabled{% endif %}>
                                            <label class="form-check-label" for="radioSchedTypeManual">
                                                Manual
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="extra_opts.keepLastAttempt" id="keepLastAttempt">
                                            <label class="form-check-label" for="keepLastAttempt">
                                                Do not delete the deployment in case of failure.
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="selectProvider" class="form-label"><strong>Select provider:</strong></label>
                                        <select class="form-select" id="selectProvider" aria-label="Select provider for manual scheduling" disabled>
                                        {% if slas %}
                                            {% for sla in slas %}
                                            <option name="selectedSLA" value="{{ sla.id }}" selected>{{ sla.sitename }}: {{ sla.service_type }}</option>
                                            {% endfor %}
                                        {% else %}
                                            <option name="selectedSLA" value="" selected>No SLAs available</option>
                                        {% endif %}
                                        </select>
                                        <small class="form-text text-muted">
                                            Use providers with <b>marathon</b> enabled (ie. XXX: YYY.marathon). If you want to use GPUs with your deployments
                                            you should also select providers with <b>gpu_support: True</b>.
                                        </small>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="mt-3 text-center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <a class="btn btn-primary btn-danger" href="{{ url('modules') }}" role="button">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    document.getElementById('radioSchedTypeManual').addEventListener('input', function(event) {
        document.getElementById('selectProvider').disabled = !this.value;
    }, false);

    document.getElementById('radioSchedTypeAuto').addEventListener('input', function(event) {
        document.getElementById('selectProvider').disabled = this.value;
    }, false);
</script>
{% endblock %}
