{% load bootstrap3 qcg_utils %}

<!-- Nav tabs -->
<ul class="nav nav-tabs" style="margin-bottom: 20px">
    <li role="presentation" class="active"><a href="#basic" data-toggle="tab">MREMD</a></li>
    <li role="presentation"><a href="#resources" data-toggle="tab">Zasoby</a></li>
    <li role="presentation"><a href="#files" data-toggle="tab">Pliki</a></li>
    <li role="presentation"><a href="#environment" data-toggle="tab">Środowisko</a></li>
    <li role="presentation"><a href="#monitoring" data-toggle="tab">Powiadomienia</a></li>
    <li role="presentation"><a href="#other" data-toggle="tab">Inne</a></li>
</ul>

<div class="tab-content">
    <fieldset id="basic" class="tab-pane active" role="tabpanel">
        
        {% bootstrap_field form.nstep layout="horizontal" %}
        {% bootstrap_field form.ntwe layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.ntwx layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.dt layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.damax layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.force_field layout="horizontal" %}
        {% bootstrap_field form.nrep layout="horizontal" %}
        {% bootstrap_field form.nstex layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.pdb_file layout="horizontal" %}
        {% bootstrap_field form.retmin layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.retmax layout="horizontal" form_group_class="form-group collapse" %}
        
        {% bootstrap_field form.application layout="horizontal" %}
        {% bootstrap_field form.master_file layout="horizontal" %}
        {% bootstrap_field form.executable layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.script layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.arguments layout="horizontal" %}
        {% bootstrap_field form.note layout="horizontal" %}
        {% bootstrap_field form.grant layout="horizontal" form_group_class="form-group collapse" %}
    </fieldset>

    <fieldset id="resources" class="tab-pane" role="tabpanel">
        {% bootstrap_field form.hosts layout="horizontal" %}
        {% bootstrap_field form.queue layout="horizontal" %}
        {% bootstrap_field form.properties layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.modules layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.procs layout="horizontal" %}
        {% bootstrap_field form.nodes layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.wall_time layout="horizontal" form_group_class="form-group timerange" %}
        {% bootstrap_field form.memory layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.memory_per_slot layout="horizontal" form_group_class="form-group collapse" %}
        {% bootstrap_field form.reservation layout="horizontal" form_group_class="form-group collapse" %}
    </fieldset>

    <fieldset id="files" class="tab-pane" role="tabpanel">
        {% bootstrap_field form.input layout="horizontal" %}
        {% bootstrap_field form.stage_in layout="horizontal" %}
    </fieldset>

    <fieldset id="environment" class="tab-pane" role="tabpanel">
        {{ env_formset.management_form }}

        <div class="form-group">
            <label class="col-sm-3 col-md-4 control-label">Zmienne środowiskowe</label>
            <div class="col-sm-9 col-md-6">
                <div id="env-controls">
                    {% for env_form in env_formset %}
                        <div>{% bootstrap_form env_form layout='inline' %}</div>
                    {% endfor %}
                </div>
                <div id="add-env-form"></div>
                <div id="env-form-empty" style="display: none">
                    {% bootstrap_form env_formset.empty_form layout='inline' %}
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset id="monitoring" class="tab-pane" role="tabpanel">
        {% bootstrap_checkbox form.monitoring %}

        {% bootstrap_button_group form.notify_type %}
        <div class="tab-content">
            <div class="tab-pane notify_type_0"></div>

            <div class="tab-pane notify_type_1 notify_type_2" style="margin-top: 15px">
                {% bootstrap_field form.notify_address layout="horizontal" %}
            </div>
        </div>

        <div class="collapse">
            {% bootstrap_button_group form.watch_output_type %}
            <div class="tab-content">
                <div class="tab-pane watch_output_type_0"></div>

                <div class="tab-pane watch_output_type_1 watch_output_type_2" style="margin-top: 15px">
                    {% bootstrap_field form.watch_output_address layout="horizontal" %}
                    {% bootstrap_field form.watch_output_pattern layout="horizontal" %}
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset id="other" class="tab-pane" role="tabpanel">
        {% bootstrap_button_group form.preprocess_type %}
        <div class="tab-content">
            <div class="tab-pane preprocess_type_0"></div>

            <div class="tab-pane preprocess_type_1" style="margin-top: 15px">
                {% bootstrap_field form.preprocess_cmd layout="horizontal" %}
            </div>

            <div class="tab-pane preprocess_type_2" style="margin-top: 15px">
                {% bootstrap_field form.preprocess_script layout="horizontal" %}
            </div>
        </div>

        {% bootstrap_button_group form.postprocess_type %}
        <div class="tab-content">
            <div class="tab-pane postprocess_type_0"></div>

            <div class="tab-pane postprocess_type_1" style="margin-top: 15px">
                {% bootstrap_field form.postprocess_cmd layout="horizontal" %}
            </div>

            <div class="tab-pane postprocess_type_2" style="margin-top: 15px">
                {% bootstrap_field form.postprocess_script layout="horizontal" %}
            </div>
        </div>

        {% bootstrap_field form.native layout="horizontal" %}
        {% bootstrap_checkbox form.persistent %}
    </fieldset>
</div>