<!DOCTYPE html>
<html>
    <head><meta charset="utf-8" />
        <title>Select Dataset</title>
    </head>
    <body>
        {% from gramex.apps.nlg.nlgapp import get_dataset_files, get_narrative_config_files %}
        {% set NLG_DATASETS = get_dataset_files(handler) %}
        {% set NLG_NARRATIVES = get_narrative_config_files(handler) %}
        <!-- Include JS dependencies  -->
        <script src="ui/popper.js/dist/umd/popper.min.js"></script>

        <form id="nlg-init-form" action="nlg/initform" method="POST" enctype="multipart/form-data">
            <div class="row">
                <!-- <label for="dataset-select" class="col-sm-2 col-form-label">Select Dataset:</label> -->
                <div class="col">
                  <select name="dataset" id="dataset-select" class="form-control" form="nlg-init-form">
                      {% for filename in NLG_DATASETS %}
                      <option value="{{ filename }}">{{ filename }}</option>
                      {% end %}
                      <option value="" hidden selected>Select Dataset</option>
                  </select>
                </div>
                <!-- <label for="narrative-select" class="col-sm-2 col-form-label">Select Narrative:</label> -->
                <div class="col">
                  <select name="narrative" id="narrative-select" class="form-control" form="nlg-init-form">
                      {% for filename in NLG_NARRATIVES %}
                      <option value="{{ filename }}">{{ filename }}</option>
                      {% end %}
                      <option value="" selected hidden>Select Narrative</option>
                  </select>
                </div>
            </div>
            <div class="divider">Or Upload New</div>
            <div class="row">
                <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
                <div class="col">
                  <label for="fileupload">Dataset:</label>
                  <input id="fileupload" name="data-file" type="file" class="form-control-file">
                </div>
                <div class="col">
                  <label for="narrativeupload">Config:</label>
                  <input id="narrativeupload" name="config-file" type="file" class="form-control-file">
                </div>
            </div>
            <div><button type="submit" class="btn btn-primary">Submit</button></div>
        </form>
    </body>
</html>
