<div xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
     xmlns:tal="http://xml.zope.org/namespaces/tal"
     xmlns:i18n="http://xml.zope.org/namespaces/i18n"
     lang="en"
     i18n:domain="senaite.databox">

  <!-- DATABOX EDITOR -->
  <form name="databox-form"
        class="form"
        method="post"
        enctype="multipart/form-data"
        tal:attributes="action string:${here/absolute_url}/@@update">

    <!-- Edit Tabs -->
    <ul class="nav nav-tabs" id="databox-edit" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active"
           i18n:translate=""
           id="query-tab"
           data-toggle="tab"
           href="#query"
           role="tab">
          Query
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link"
           i18n:translate=""
           id="advanced-query-tab"
           data-toggle="tab"
           href="#advanced-query"
           role="tab">
          Advanced Query
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link"
           i18n:translate=""
           id="columns-tab"
           data-toggle="tab"
           href="#columns"
           role="tab">
          Columns
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link"
           i18n:translate=""
           id="info-tab"
           data-toggle="tab"
           href="#info"
           role="tab">
          Info
        </a>
      </li>
    </ul>
    <div class="tab-content mt-3">
      <!-- QUERY CONFIG TAB -->
      <div class="tab-pane fade show active" id="query" role="tabpanel">
        <div class="form-text text-muted mb-2" i18n:translate="">
          Define basic query options.
        </div>
        <div class="form-row">
          <!-- sort on -->
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span i18n:translate="">Sort on</span>
                </div>
              </div>
              <select class="form-control"
                      name="senaite.databox.sort_on">
                <tal:indexes repeat="index view/get_catalog_sort_indexes">
                  <option tal:attributes="value index; selected python:context.sort_on == index and 'selected' or ''">
                    <span tal:replace="index"/>
                  </option>
                </tal:indexes>
              </select>
            </div>
          </div>
          <!-- limit -->
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span i18n:translate="">Limit</span>
                </div>
              </div>
              <input type="number"
                     style="width:75px"
                     class="form-control"
                     id="field-limit"
                     tal:attributes="value here/limit"
                     min="1"
                     name="senaite.databox.limit:int">
            </div>
          </div>
          <!-- reversed order -->
          <div class="col-auto">
            <div class="form-check mb-2">
              <input type="checkbox"
                     class="form-check-input"
                     id="field-sort_reversed"
                     tal:attributes="checked here/sort_reversed;"
                     value="selected"
                     name="senaite.databox.sort_reversed:boolean">
              <input type="hidden"
                     value=""
                     tal:condition="here/sort_reversed"
                     name="senaite.databox.sort_reversed:boolean" />
              <label class="form-check-label" for="field-sort_reversed" i18n:translate="">
                Reversed order
              </label>
            </div>
          </div>
        </div>

        <div class="form-row">
          <!-- date index -->
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span i18n:translate="">Date Index</span>
                </div>
              </div>
              <select class="form-control"
                      name="senaite.databox.date_index">
                <tal:indexes repeat="index view/get_catalog_date_indexes">
                  <option tal:attributes="value index; selected python:context.date_index == index and 'selected' or ''">
                    <span tal:replace="index"/>
                  </option>
                </tal:indexes>
              </select>
            </div>
          </div>
          <!-- date from -->
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span i18n:translate="">Date From</span>
                </div>
              </div>
              <input type="date"
                     class="form-control"
                     tal:define="date_from here/date_from"
                     tal:attributes="value python:date_from and date_from.strftime('%Y-%m-%d')"
                     name="senaite.databox.date_from">
            </div>
          </div>
          <!-- date to -->
          <div class="col-auto">
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span i18n:translate="">Date To</span>
                </div>
              </div>
              <input type="date"
                     class="form-control"
                     tal:define="date_to here/date_to"
                     tal:attributes="value python:date_to and date_to.strftime('%Y-%m-%d')"
                     name="senaite.databox.date_to">
            </div>
          </div>
        </div>
      </div>

      <!-- ADVANCED QUERY CONFIG TAB -->
      <div class="tab-pane fade" id="advanced-query" role="tabpanel">
        <div class="form-text text-muted mb-2" i18n:translate="">
          Define one or more explicit values for catalog indexes to refine the query.
        </div>
        <div class="form-row">
          <ul id="advanced-queries" class="col-auto list-unstyled m-0">
            <li class="advanced-query d-flex flex-wrap p-0"
                tal:define="query view/get_advanced_query;"
                tal:repeat="q python:sorted(query, reverse=1)">

              <!-- Index -->
              <div class="flex-fill mr-2">
                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">
                      <span i18n:translate="">Index</span>
                    </div>
                  </div>
                  <select class="form-control"
                          name="senaite.databox.advanced_query.index:records">
                    <tal:indexes repeat="index view/get_catalog_indexes">
                      <option tal:attributes="value index; selected python:index == q and 'selected' or ''">
                        <span tal:replace="index"/>
                      </option>
                    </tal:indexes>
                  </select>
                </div>
              </div>

              <!-- Value -->
              <div class="flex-fill mr-2">
                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">
                      <span i18n:translate="">=</span>
                    </div>
                  </div>
                  <input type="text"
                         class="form-control"
                         tal:attributes="value python:query[q];"
                         name="senaite.databox.advanced_query.value:records">
                  <div class="input-group-append">
                    <div class="input-group-text">
                      <input class="mr-2"
                             value="1"
                             name="senaite.databox.advanced_query.delete:bool:records"
                             type="checkbox"/>
                      <span i18n:translate="">Delete</span>
                    </div>
                  </div>
                </div>
              </div>

            </li>
          </ul>
        </div>
      </div>

      <!-- COLUMNS CONFIG TAB -->
      <div class="tab-pane fade" id="columns" role="tabpanel">
        <div class="form-text text-muted mb-2" i18n:translate="">
          Define display columns for the search results.
        </div>
        <div class="form-text text-muted" i18n:translate="">
          Use the code line below to retrieve a value by a Python expression
          instead using the field.
        </div>
        <div class="form-text text-muted">
          <span i18n:translate="">Available variables are </span>
          <code>context</code> <span i18n:translate="">(the current column context),</span>
          <code>model</code> <span i18n:translate="">(wrapped senaite.supermodel context),</span>
          <code>brain</code> <span i18n:translate="">(catalog brain of the databox query type),</span>
          <code>obj</code> <span i18n:translate="">(content object of the databox query type),</span>
          <code>api</code> <span i18n:translate="">(the senaite API module).</span>
        </div>
        <div class="form-text text-muted">
          <strong i18n:translate="">Examples:</strong>
          <ul>
            <li>
              <code>context.aq_parent.Title()</code>
              <span i18n:translate="">Retrieve the title of the parent object</span>
            </li>
            <li>
              <code>api.get_review_status(context)</code>
              <span i18n:translate="">Retrieve the review state of the current context</span>
            </li>
          </ul>
        </div>
        <div class="form-text text-muted">
          <strong i18n:translate="">Caution:</strong>
          <span i18n:translate="">
            Using the code field executes the Python
            code without restrictions and can potentially damage data.
          </span>
        </div>
        <div class="form-row">
          <ul id="columns-list" class="columns col-auto list-unstyled">
            <li class="column pt-2 pl-2 mb-2 border border-light rounded bg-light"
                tal:define="columns python:view.columns;"
                tal:repeat="column columns">

              <div class="d-flex text-nowrap">
                <!-- column title -->
                <div class="flex-fill mr-2">
                  <div class="input-group input-group-sm mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">
                        <i class="fas fa-tag"></i>
                        <span class="ml-1" i18n:translate="">Label</span>
                      </div>
                    </div>
                    <input type="text"
                          class="form-control"
                          tal:attributes="value python:columns[column].get('title')"
                          name="senaite.databox.columns.title:records">
                  </div>
                </div>

                <!-- column -->
                <div class="flex-fill mr-2">
                  <div class="input-group input-group-sm mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">
                        <i class="fas fa-database"></i>
                        <span class="ml-1" i18n:translate="">Field</span>
                      </div>
                    </div>
                    <select class="form-control"
                            name="senaite.databox.columns.column:records">
                      <tal:indexes repeat="field view/get_schema_fields">
                        <option tal:attributes="value field; selected python:field == columns.get(column).get('column') and 'selected' or ''">
                          <span tal:replace="field"/>
                        </option>
                      </tal:indexes>
                    </select>
                  </div>
                </div>

                <!-- reference columns -->
                <div class="flex-fill mr-2"
                    tal:repeat="ref python:view.get_reference_columns(column)">
                  <div class="input-group input-group-sm mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">
                        <span>
                          <span class="ref-type">
                            <i class="fas fa-arrow-right"></i>
                            <span tal:content ="ref/type"></span>
                          </span>
                        </span>
                      </div>
                    </div>
                    <select class="form-control"
                            name="senaite.databox.columns.refs:list:records">
                      <tal:keys repeat="key ref/fields">
                        <option tal:attributes="value key; selected python:key == ref.get('key') and 'selected' or ''">
                          <span tal:replace="key"/>
                        </option>
                      </tal:keys>
                    </select>
                  </div>
                </div>

                <!-- add/del column button -->
                <div class="flex mr-2">
                  <button title="add"
                          i18n:attributes="title"
                          class="add_column btn btn-sm btn-outline-success">
                    <i class="fas fa-plus"/>
                  </button>
                  <button title="Delete column"
                          i18n:attributes="title"
                          class="del_column btn btn-sm btn-outline-danger">
                    <i class="fas fa-minus"/>
                  </button>
                </div>
              </div>


              <div class="d-flex text-nowrap">
                <!-- Code -->
                <div class="flex-fill mr-2">
                  <div class="input-group input-group-sm mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">
                        <i class="fas fa-code"></i>
                        <span class="ml-1" i18n:translate="">Code</span>
                      </div>
                    </div>
                    <input type="text"
                          class="form-control"
                          tal:attributes="value python:columns[column].get('code')"
                          name="senaite.databox.columns.code:records">
                  </div>
                </div>

                <!-- converter -->
                <div class="flex-fill mr-2" style="max-width:225px">
                  <div class="input-group input-group-sm mb-2">
                    <div class="input-group-prepend">
                      <div class="input-group-text">
                        <i class="fas fa-compress"></i>
                        <span class="ml-1" i18n:translate="">Converter</span>
                      </div>
                    </div>
                    <select class="form-control"
                            name="senaite.databox.columns.converter:records">
                      <tal:indexes repeat="converter view/get_converters">
                        <option tal:define="name converter/name; description converter/description"
                                tal:attributes="value name;
                                                label converter/description;
                                                selected python:name == columns[column].get('converter') and 'selected' or ''">
                          <span tal:replace="name"/>
                        </option>
                      </tal:indexes>
                    </select>
                  </div>
                </div>

              </div>

            </li>
          </ul>
        </div>
      </div>

      <!-- Info TAB -->
      <div class="tab-pane fade" id="info" role="tabpanel">
        <table class="table-borderless mb-4">
          <!-- Schema fields -->
          <tr tal:condition="python:request.get('debug', False)"
              tal:repeat="widget view/widgets">
            <td class="text-nowrap font-weight-bold pr-1">
              <div tal:content="widget/label" />
            </td>
            <td>
              <code class="text-dark" tal:content="structure widget/value" />
            </td>
          </tr>
          <!-- Primary Type -->
          <tr>
            <td class="font-weight-bold text-nowrap align-top mr-2" i18n:translate="">
              Portal Type
            </td>
            <td>
              <code class="text-dark" tal:content="view/databox/query_type"></code>
            </td>
          </tr>
          <!-- Catalog -->
          <tr>
            <td class="font-weight-bold text-nowrap align-top mr-2" i18n:translate="">
              Catalog
            </td>
            <td>
              <code class="text-dark" tal:content="view/databox/get_query_catalog"></code>
            </td>
          </tr>
          <!-- Catalog Query -->
          <tr>
            <td>
              <span class="font-weight-bold text-nowrap align-top mr-2" i18n:translate="">
                Catalog Query
              </span>
            </td>
            <td>
              <code class="text-dark" tal:content="view/databox/query"></code>
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- hidden fields -->
    <input type="hidden" name="submitted" value="1" />
    <input type="hidden" name="tab" value="query" tal:attributes="value request/tab|string:query" />
    <input tal:replace="structure context/@@authenticator/authenticator"/>

    <!-- !TEMPORARY DEACTIVATED!
         ReactJS managed component -->
    <div tal:condition="python:False"
         class="databox"
         tal:attributes="view/settings">
    </div>
    <!-- /ReactJS managed component -->

    <!-- submit button -->
    <input class="btn btn-sm btn-primary" type="submit" name="form.buttons.save" value="Update" />
  </form>

</div>
