{% extends "base.html" %}

{% block title %}Survey Builder{% endblock %}

{% block extra_head %}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- jQuery -->
  <script type="text/javascript" src="/-/static-plugins/datasette-surveys/lib/jquery/dist/jquery.min.js"></script>

  <!-- Bootstrap -->
  <link href="/-/static-plugins/datasette-surveys/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen">
  <link type="text/css" href="/-/static-plugins/datasette-surveys/lib/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />
  <script type="text/javascript" src="/-/static-plugins/datasette-surveys/lib/bootstrap/dist/js/bootstrap.js"></script>

  <!-- Handlebars -->
  <script type="text/javascript" src="/-/static-plugins/datasette-surveys/lib/handlebars/handlebars.min.js"></script>

  <!-- Alpaca -->
  <link type="text/css" href="/-/static-plugins/datasette-surveys/lib/alpaca/dist/alpaca/bootstrap/alpaca.css" rel="stylesheet" />
  <script type="text/javascript" src="/-/static-plugins/datasette-surveys/lib/alpaca/dist/alpaca/bootstrap/alpaca.js"></script>

  <!-- Beautify (used by EditorField) -->
  <script src="/-/static-plugins/datasette-surveys/lib/js-beautify/js/lib/beautify.js" type="text/javascript" charset="utf-8"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/js-beautify/js/lib/beautify-css.js" type="text/javascript" charset="utf-8"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/js-beautify/js/lib/beautify-html.js" type="text/javascript" charset="utf-8"></script>

  <!-- typeahead.js -->
  <script src="/-/static-plugins/datasette-surveys/lib/typeahead.js/dist/bloodhound.min.js" type="text/javascript"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/typeahead.js/dist/typeahead.bundle.min.js" type="text/javascript"></script>

  <!-- datatables (for TableField) -->
  <link type="text/css" href="/-/static-plugins/datasette-surveys/lib/datatables.net-bs/css/dataTables.bootstrap.css" rel="stylesheet"/>
  <script src="/-/static-plugins/datasette-surveys/lib/datatables.net/js/jquery.dataTables.js" type="text/javascript"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/datatables.net-bs/js/dataTables.bootstrap.js" type="text/javascript"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/datatables.net-rowreorder/js/dataTables.rowReorder.js" type="text/javascript"></script>

  <!-- ckeditor (for the ckeditor field) -->
  <script src="/-/static-plugins/datasette-surveys/lib/ckeditor/ckeditor.js" type="text/javascript"></script>

  <!-- fileupload control (for UploadField) -->
  <link rel="stylesheet" type="text/css" href="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/css/jquery.fileupload.css"/>
  <link rel="stylesheet" type="text/css" href="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/css/jquery.fileupload-ui.css"/>
  <script src="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/js/jquery.fileupload.js"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/js/jquery.fileupload-process.js"></script>
  <script src="/-/static-plugins/datasette-surveys/lib/blueimp-file-upload/js/jquery.fileupload-ui.js"></script>

  <!-- handsontable (for GridField) -->
  <link rel="stylesheet" media="screen" href="/-/static-plugins/datasette-surveys/lib/handsontable/dist/jquery.handsontable.full.css"/>
  <script src="/-/static-plugins/datasette-surveys/lib/handsontable/dist/jquery.handsontable.full.js"></script>

  <!-- moment for date and datetime controls -->
  <script src="/-/static-plugins/datasette-surveys/lib/moment/min/moment-with-locales.min.js"></script>
  <!-- bootstrap datetimepicker for date and datetime controls -->
  <link rel="stylesheet" media="screen" href="/-/static-plugins/datasette-surveys/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css"/>
  <script src="/-/static-plugins/datasette-surveys/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

  <!-- bootstrap-multiselect for time field -->
  <link rel="stylesheet" media="screen" href="/-/static-plugins/datasette-surveys/lib/bootstrap-multiselect/css/bootstrap-multiselect.css"/>
  <script src="/-/static-plugins/datasette-surveys/lib/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>

  <!-- jQuery Price Format for currency field -->
  <script type="text/javascript" src="/-/static-plugins/datasette-surveys/lib/jquery-price-format2/jquery.price_format.min.js"></script>

  <!-- ACE editor -->
  <script src="/-/static-plugins/datasette-surveys/lib/ace-builds/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

  <!-- jQuery UI for draggable support -->
  <script src="/-/static-plugins/datasette-surveys/lib/jquery-ui/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

  <!-- form builder -->
  <script id="schema-data" type="application/json">{{ schema|safe }}</script>
  <script id="options-data" type="application/json">{{ options|safe }}</script>
  <link type="text/css" href="/-/static-plugins/datasette-surveys/form-builder.css" rel="stylesheet" />
  <script type="text/javascript" src="/-/static-plugins/datasette-surveys/form-builder.js"></script>

  <style>
    .survey-name-wrapper {
      padding: 2em;
    }
    label[for='survey-name'] {
      display: block;
      box-sizing: border-box;
      font-size: 1.6em;
      padding: 0 1em;
    }
    input#survey-name {
      display: block;
      font-size: 1.6em;
      width: 100%;
      padding: 1em 2em;
    }
  </style>
{% endblock %}

{% block nav %}
<p class="crumbs">
  <a href="{{ urls.instance() }}">home</a> |
  <a href="/-/surveys">surveys</a>
</p>
{{super()}}
{% endblock %}

{% block content %}
<h1>Datasette Survey Builder</h1>
<p>
Use the tool below to build a survey. Clicking the "Designer" tab will allow you to edit the form being displayed on the "View" tab.
</p>
<p>
  When you're done, click "save" down below.
</p>
<p>
  <strong>Important:</strong> Try and finalize your survey fields before collecting responses. If you do need to make a significant change to a survey that already has existing responses, consider hiding, not removing old or unwanted survey fields.
</p>

<div data-spy="scroll" data-target=".demo-nav">

    <div class="container">
        <div class="row">
          <div class="col-md-12 survey-name-field">
            <label for="survey-name">Survey Name</label>
            <input type="text"
                   id="survey-name"
                   class="requied"
                   value="{{ survey_name }}"
                   placeholder="My survey" />
          </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div>
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#view" data-toggle="tab" class="tab-item tab-item-view">View</a></li>

                        <li><a href="#designer" data-toggle="tab" class="tab-item tab-item-designer">Designer</a></li>
                        <li><a href="#code" data-toggle="tab" class="tab-item tab-item-code">Code</a></li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="source">
                        <div class="row">
                            <div class="col-md-6">
                                <div>
                                    <ul class="nav nav-tabs">
                                        <li><a href="#schema" data-toggle="tab" class="tab-source-schema">Schema</a></li>
                                        <li><a href="#options" data-toggle="tab" class="tab-source-options">Options</a></li>
                                        <li><a href="#data" data-toggle="tab" class="tab-source-data">Data</a></li>
                                    </ul>
                                </div>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="schema">
                                    </div>
                                    <div class="tab-pane" id="options">
                                    </div>
                                    <div class="tab-pane" id="data">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a href="#preview" data-toggle="tab">Preview</a></li>
                                    </ul>
                                </div>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="preview">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div id="previewDiv"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="designer">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="designerDiv"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div>
                                            <ul class="nav nav-tabs">
                                                <li class="active"><a href="#types" data-toggle="tab">Types</a></li>
                                                <li><a href="#basic" data-toggle="tab">Basic</a></li>
                                                <li><a href="#advanced" data-toggle="tab">Advanced</a></li>
                                            </ul>
                                        </div>
                                        <div class="tab-content">
                                            <div class="tab-pane active" id="types"></div>
                                            <div class="tab-pane" id="basic"></div>
                                            <div class="tab-pane" id="advanced"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane active" id="view">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="viewDiv"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="code">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="codeDiv"></div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="loadsave">
                        <div class="row">
                            <div class="col-md-12">

                                <button class="btn btn-default load-button">Load Form</button>
                                <br/>
                                <br/>
                                <button class="btn btn-default save-button">Save Form</button>
                                <br/>

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

    <button id="save-survey">Save Survey</button>
</div>

<form id="hidden-save-form" action="/-/surveys/{{id}}" method="POST" style="display:none;">
  <input id="hidden-input-schema" type="hidden" name="schema" value="{{ schema|safe }}" />
  <input id="hidden-input-options" type="hidden" name="options" value="{{ options|safe }}" />
  <input id="hidden-survey-name" type="hidden" name="survey_name" value="{{ survey_name }}" /> <br/>
  <input type="hidden" name="csrftoken" value="{{ csrftoken() }}" />
</form>
{%endblock %}
