<!DOCTYPE html>
<html>

<head>
  <title>factgenie</title>
  <link rel="stylesheet" media="screen" href="{{ host_prefix }}/static/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="{{ host_prefix }}/static/css/custom.css">
  <link href="{{ host_prefix }}/static/css/font-awesome.css" rel="stylesheet">
  <link rel="shortcut icon" href="{{ host_prefix }}/static/img/favicon.ico">
  <link href="{{ host_prefix }}/static/css/huebee.min.css" rel="stylesheet">
  <meta name="viewport" content="width=1024">
  <script src="{{ host_prefix }}/static/js/lib/jquery.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/popper.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
  <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
  <script src="{{ host_prefix }}/static/js/lib/huebee.min.js"></script>
</head>

<body>
  {% include 'pages/navbar.html' %}


  <div class="container w-50 panel-50 mt-5">
    <a href="{{ host_prefix }}/crowdsourcing" class="btn btn-outline-secondary mb-5">← Crowdsourcing campaigns</a>
    <div class="mt-1">

      <form id="annotation-campaign-form">
        <h3>New crowdsourcing campaign</h3>

        <ul class="nav nav-tabs nav-justified mt-5">
          <li class="nav-item">
            <a class="nav-link active" id="nav-tabs-campaign" aria-current="page" href="#tab-campaign"
              data-bs-toggle="pill">Campaign</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-tabs-config" href="#tab-config" data-bs-toggle="pill">Configuration</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-tabs-data" href="#tab-data" data-bs-toggle="pill">Data</a>
          </li>
        </ul>

        <div class="tab-content">
          <div id="tab-campaign" role="tabpanel" class="tab-pane active new-campaign-form" tabindex="0">
            <div class="row g-3 mb-3 align-items-center">
              <div class="col-auto">
                <label for="campaignId">Campaign Id</label>
              </div>
              <div class="col-auto">
                <input type="text" class="form-control" id="campaignId" name="campaignId"
                  value="{{ default_campaign_id }}" required>
              </div>
              <div class="col-auto">
                <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip"
                  title="Create a unique campaign identifier"></i>
              </div>
            </div>
            <div style="text-align: center;">
              <button type="button" class="btn btn-primary mt-3"
                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Next</button>
            </div>
          </div>
          <div id="tab-config" role="tabpanel" class="tab-pane new-campaign-form" tabindex="1">
            <div class="row g-3 mb-3 align-items-center">
              <div class="col-auto">
                <span style="margin-left: 5px; margin-right: 10px;">Preset</span>
              </div>
              <div class="col-auto">
                <select class="form-select" id="crowdsourcingConfig" name="crowdsourcingConfig"
                  onchange="updateCrowdsourcingConfig();">
                  <option value="[None]">[None]</option>
                  {% for config_name in configs.keys() %}
                  <option value="{{ config_name }}">{{ config_name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-auto">
                <i class="fa fa-question-circle opacity-25" aria-hidden="true" data-bs-toggle="tooltip" title="Add your custom preset to
          factgenie/config/crowdsourcing or save your current configuration."></i>
              </div>
            </div>

            <div class="rounded-box mt-4">
              {% include 'include/annotation_span_categories.html' %}

              <div class="col-auto mt-3">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="prefillInstructions();">✨
                  Pre-fill annotator
                  instructions</button>
              </div>

              <!-- textarea for annotator instructions -->
              <div class="form-group mt-3">
                <label for="annotatorInstructions">Annotator instructions</label>
                <div class="mb-2">
                  <small class="form-text text-muted">Instructions shown to the annotators. Use Markdown syntax.</small>
                </div>
                <textarea class="form-control" id="annotatorInstructions" name="annotatorInstructions"
                  required></textarea>
              </div>
              <!-- textarea for final message -->
              <div class="form-group">
                <label for="finalMessage">Final message</label>
                <div class="mb-2">
                  <small class="form-text text-muted">The message shown after the annotator has submitted the
                    annotations.
                    Use Markdown syntax. You should include the completion code here. </small>
                </div>
                <textarea class="form-control" id="finalMessage" name="finalMessage" required></textarea>
              </div>
              <div class="form-group">
                <label for="service">Service</label>
                <div class="mb-2">
                  <small class="form-text text-muted">Which crowdsourcing service will be used for the campaign.</small>
                </div>
                <select class="form-select" id="service" name="service">
                  <option value="local">Local annotators only</option>
                  <option value="prolific">Prolific</option>
                  <!-- <option value="mturk">Amazon Mechanical Turk (beta)</option> -->
                </select>
              </div>
              <div class="form-group  mt-4">
                <label for="examplesPerBatch">Examples per batch</label>
                <div class="mb-2">
                  <small class="form-text text-muted">Number of examples shown to each annotator </small>
                </div>
                <input type="number" class="form-control" id="examplesPerBatch" name="examplesPerBatch" min="1"
                  required>
              </div>
              <div class="form-group  mt-4">
                <label for="annotatorsPerExample">Annotators per example</label>
                <div class="mb-2">
                  <small class="form-text text-muted">Maximum number of annotators that can annotate an example.
                  </small>
                </div>
                <input type="number" class="form-control" id="annotatorsPerExample" name="annotatorsPerExample" min="1"
                  value="1" required>
              </div>
              <div class="form-group mt-4">
                <label for="annotationGranularity">Annotation granularity</label>
                <div class="mb-2">
                  <small class="form-text text-muted">The smallest unit annotators can annotate.</small>
                </div>
                <select class="form-select" id="annotationGranularity" name="annotationGranularity">
                  <option value="words">Words</option>
                  <option value="chars">Characters</option>
                </select>
              </div>
              <div class="form-group mt-4">
                <label for="annotationOverlapAllowed">Allow overlapping annotations</label>
                <div class="mb-2">
                  <small class="form-text text-muted">Whether annotators can annotate the same part of the text multiple
                    times</small>
                </div>
                <div class="form-check form-switch">
                  <input type="checkbox" class="form-check-input" id="annotationOverlapAllowed"
                    name="annotationOverlapAllowed">
                </div>
              </div>
              <div class="form-group mt-4">
                <!-- select for sort order -->
                <label for="sortOrder">Output ordering</label>
                <div class="mb-2">
                  <small class="form-text text-muted">How should the examples and model outputs assigned to annotator
                    batches.</small>
                </div>
                <select class="form-select" id="sortOrder" name="sortOrder">
                  <option value="shuffle-all">Shuffle all</option>
                  <option value="sort-example-ids-shuffle-setups">Sort by example id, shuffle model outputs</option>
                  <option value="sort-example-ids-keep-setups">Sort by example id, keep the order of model outputs
                  </option>
                  <option value="keep-all">Keep the default order</option>
                </select>
              </div>
              <div class="form-group mt-4">
                <label for="idleTime">Idle Time (minutes)</label>
                <div class="mb-2">
                  <small class="form-text text-muted">The time after which an unfinished example can be re-assigned to a
                    new annotator.
                  </small>
                </div>
                <input type="number" class="form-control" id="idleTime" name="idleTime" min="0">
              </div>

              <div class="accordion  mt-3" id="advancedAccordion">
                <div class="accordion-item">
                  <h2 class="accordion-header" id="headingAdvanced">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
                      Example-level inputs
                    </button>
                  </h2>
                  <div id="collapseAdvanced" class="accordion-collapse collapse show" aria-labelledby="headingAdvanced"
                    data-bs-parent="#advancedAccordion">
                    <div class="accordion-body">
                      <div class="row mb-3 align-items-center">
                        <div class="col-auto">
                          <i class="fa fa-check"></i>
                          <span style="margin-left: 5px; margin-right: 10px;">Flags</span>
                          <div class="mb-2">
                            <small class="form-text text-muted">Checkboxes that the annotators can mark for each
                              example.</small>
                          </div>
                        </div>
                        <div id="flags"></div>
                        <div class="col-auto mt-1">
                          <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addFlag();">+</button>
                        </div>
                      </div>
                      <div class="row mb-3 align-items-center">
                        <div class="col-auto">
                          <i class="fa fa-list-ul"></i>
                          <span style="margin-left: 5px; margin-right: 10px;">List of options</span>
                          <div class="mb-2">
                            <small class="form-text text-muted">Options that the annotators can choose from for each
                              example.</small>
                          </div>
                        </div>
                        <div id="options"></div>
                        <div class="col-auto mt-1">
                          <button type="button" class="btn btn-outline-secondary btn-sm"
                            onclick="addOption();">+</button>
                        </div>
                      </div>
                      <!-- sliders -->
                      <div class="row mb-3 mt-3 align-items-center">
                        <div class="col-auto">
                          <i class="fa fa-sliders"></i>
                          <span style="margin-left: 5px; margin-right: 10px;">Sliders</span>
                          <div class="mb-2">
                            <small class="form-text text-muted">Slider with values that the annotators can select for
                              each
                              example.</small>
                          </div>
                        </div>
                        <div id="sliders"></div>
                        <div class="col-auto mt-1">
                          <button type="button" class="btn btn-outline-secondary btn-sm"
                            onclick="addSlider();">+</button>
                        </div>
                      </div>

                      <!-- text fields -->
                      <div class="row mt-3 mb-1 align-items-center">
                        <div class="col-auto">
                          <i class="fa fa-file-text-o"></i>
                          <span style="margin-left: 5px; margin-right: 10px;">Text fields</span>
                          <div class="mb-2">
                            <small class="form-text text-muted">Text fields that the annotators can fill for each
                              example.</small>
                          </div>
                        </div>
                        <div id="textFields"></div>
                        <div class="col-auto mt-1">
                          <button type="button" class="btn btn-outline-secondary btn-sm"
                            onclick="addTextField();">+</button>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>



            <div style="text-align: center;">
              <button type="button" class="btn btn-outline-secondary mt-3"
                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-campaign")).show()'>Back</button>
              <button type="button" class="btn btn-outline-secondary mt-3" data-bs-toggle="modal"
                data-bs-target="#save-cfg-modal">Save config as...</button>
              <button type="button" class="btn btn-primary mt-3"
                onclick=' bootstrap.Tab.getOrCreateInstance($("#nav-tabs-data")).show()'>Next</button>
            </div>
          </div>

          <div id="tab-data" class="tab-pane new-campaign-form" role="tabpanel" tabindex="2">

            {% include 'include/data_selection.html' %}

            <div style="text-align: center;">
              <button type="button" class="btn btn-outline-secondary mt-3"
                onclick='bootstrap.Tab.getOrCreateInstance($("#nav-tabs-config")).show()'>Back</button>
              <button type="button" class="btn btn-primary mt-3" onclick="createHumanCampaign();">Create
                campaign</button>
            </div>
          </div>
        </div>
      </form>
      <div>

      </div>
    </div>


    <div class="modal fade" id="save-cfg-modal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="about-modal-label">Save config as...</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id='configarea' class="tab-pane sidepanel-panel w-75" role="tabpanel" tabindex="0">
              <label for="exampleDataList" class="form-label">Config name</label>
              <div class="input-group mb-3">
                <input type="text" class="form-control" id="config-save-filename" list="datalistOptions"
                  placeholder="Click to see existing configurations..."
                  aria-label="Click to see existing configurations..." aria-describedby="basic-addon2">
                <span class="input-group-text" id="basic-addon2">.yaml</span>
              </div>
              <datalist id="datalistOptions">
                {% for filename in configs.keys() %}
                <!-- save the name without suffix to variable -->
                <option value="{{ filename.split('.')[0] }}">
                  {{ filename }}
                </option>
                {% endfor %}
              </datalist>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" id="save-cfg-submit" class="btn btn-primary mt-3"
              onclick="saveConfig('crowdsourcing')">Save
              config</button>
          </div>
        </div>
      </div>

    </div>

  </div>

</body>
<script>
  window.url_prefix = "{{ host_prefix }}";
  window.available_data = {{ available_data | tojson | safe }};
  window.datasets = {{ datasets | tojson | safe }};
  window.configs = {{ configs | tojson | safe }};
  window.default_prompts = {{ default_prompts | tojson | safe }};
  window.mode = "crowdsourcing";

  var annotatorInstructionsMDE = new SimpleMDE({
    element: $("#annotatorInstructions")[0], spellChecker: false,
    // autosave: { enabled: true, unique_id: "annotatorInstructionsText" } 
  });
  var finalMessageMDE = new SimpleMDE({
    element: $("#finalMessage")[0], spellChecker: false,
    // autosave: { enabled: true, unique_id: "finalMessageText" } 
  });
</script>
<script src="{{ host_prefix }}/static/js/utils.js"></script>
<script src="{{ host_prefix }}/static/js/campaigns.js"></script>