<!doctype html>
<html lang="en">

{% set base = '.' %}
{% set active_form_id = handler.get_argument('id', '') %}
{% set title = 'Form Builder' if active_form_id else 'Form Builder - Create a form' %}
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>{{ title }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{{ base }}/node_modules/dragula/dist/dragula.min.css">
  <link rel="stylesheet" href="{{ base }}/node_modules/jqueryui/jquery-ui.css">
  <link rel="stylesheet" href="{{ base }}/style.scss">
</head>
<body>
  {% import os %}
  {% import json %}
  {% from gramex import variables %}
  {% from form_builder import FOLDER %}
  {% from gramex.data import filter as gfilter %}
  {% from gramex.config import variables as var %}

  {% set form_details = gfilter(url=var.FORMS_URL, table=var.FORMS_TABLE, args={'id': [active_form_id]}) %}
  {% set form_details = form_details %}
  {% set _md = json.loads(form_details['metadata'].iloc[0]) if active_form_id else '' %}
  {% set _config = form_details['config'].iloc[0] if active_form_id else '' %}
  {% set form_fields = ['button', 'checkbox', 'email', 'hidden', 'number', 'password', 'radio', 'range', 'select', 'text', 'textarea'] %}
  {% set _config = json.loads(_config) if active_form_id else {} %}
  {% set _config.pop('undefined') if _config and 'undefined' in _config else '' %}
  {% for k, v in _config.items() %}
    {% if k != 'undefined' %}
      {% set _config[k] = [json.loads(item) for item in v] %}
    {% end %}
  {% end %}

  {% include template-navbar.html %}
  <div class="container py-4">
    <h1 class="text-center text-muted">{{ 'Updating an existing form' if active_form_id else 'Creating a new form' }}</h1>
    <div class="form-details step-1 my-3 py-3">
      <h3>Step 1 - Form details</h3>
      <div class="divider"></div>
      <form class="needs-validation" novalidate>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="form-name">Form name</label>
            <input type="text" class="form-control" name="form-name" id="form-name" aria-describedby="form-name-helpId" value="{{_md['name'] if active_form_id else '' }}" pattern=".{5,}" minlength="5" required="required">
            <small class="text-muted">At least five characters are required</small>
          </div>
          <div class="col-md-6 mb-3">
            <label for="form-description">Description</label>
            <textarea class="form-control" name="form-description" id="form-description" rows="2" cols="5" minlength="5" required="required">{{ _md['description'] if active_form_id else ''}}</textarea>
            <small class="text-muted">At least five characters are required</small>
          </div>
        </div>
      </form>
    </div>
    <h3>Step 2 - Configure form</h3>
    <div class="divider"></div>

    <div class="card-deck step-2">
      <div class="card border-0">
        <div class="card-header bg-white d-flex justify-content-between">
          <h5 class="card-title my-0">Add fields</h5>
        </div><!-- .card-header -->
        <div class="card-body">
          <small class="text-muted drag-fields-note d-none">
            Drag fields to reorder.
          </small>
          <div id="user-form">
            <form class="user-form sortable mt-3 w-100">
              {% if (active_form_id) %}
                {% raw form_details['html'].iloc[0] %}
              {% end %}
            </form>
            <div class="divider"></div>
            <button class="btn btn-primary mb-4" data-toggle="modal" data-target="#addFieldModal" title="Add a field">
              <i class="fa fa-plus"></i>
            </button>
          </div>
        </div><!-- .card-body -->
      </div><!-- .card -->
      <div class="card border-0">
        <div class="card-header bg-white d-flex justify-content-between">
          <h5 class="card-title my-0 w-100">
            <span>Edit properties</span>
            <a class="btn btn-danger float-right delete-field-trigger {{ '' if active_form_id else 'd-none' }}" data-toggle="modal" data-target="#deleteFieldModal" title="Delete field">
              <i class="fa fa-trash-alt"></i>
            </a>
          </h5>
        </div><!-- .card-header -->
        <div class="card-body edit-properties-container">
          <div class="edit-properties"></div>
        </div>
      </div>
    </div><!-- .card-deck -->
  </div><!-- .container-fluid -->
  {% include 'toast.html' %}
  {% include 'modals/add-field.html' %}
  {% include 'modals/delete-form-field.html' %}

  <div class="floating-button m-2 p-2 position-fixed">
    <button class="btn btn-primary ml-2 {{ '' if active_form_id else 'd-none' }}" id="publish-form">{{ 'Update' if active_form_id else 'Publish' }}</button>
    <p class="post-publish text-center d-none">
      <span class="form-link"></span>
      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-up-right-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.879 10.828a.5.5 0 1 1-.707-.707l4.096-4.096H6.5a.5.5 0 0 1 0-1h3.975a.5.5 0 0 1 .5.5V9.5a.5.5 0 0 1-1 0V6.732l-4.096 4.096z"/>
      </svg>
    </p>
  </div>

  <script src="{{ base }}/ui/jquery/dist/jquery.min.js"></script>
  <script src="{{ base }}/node_modules/jqueryui/jquery-ui.min.js"></script>
  <script src="{{ base }}/ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="{{ base }}/ui/lodash/lodash.min.js"></script>
  <script src="{{ base }}/ui/g1/dist/g1.min.js"></script>
  <script>
    /* exported user, user_name, active_form_id, _user_form_config */
    let user = '{% raw handler.current_user.get("id") if handler.current_user else '' %}'
    let active_form_id = '{{ active_form_id }}'
    let _user_form_config = active_form_id ? JSON.parse('{% raw json.dumps(_config).replace("'", r"\'") %}') : ''
    $('.sortable').sortable()
  </script>
  <script src="{{ base }}/js/script.js"></script>
</body>
</html>
