<!DOCTYPE html>
<html>
  <head>
    <title>{{^id}}Add{{/id}}{{#id}}Edit{{/id}} nestedfk</title>
    {{>head}}
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        {{>home}}
        <h1>{{^id}}Add{{/id}}{{#id}}Edit{{/id}} nestedfk</h1>
        {{#id}}
        {{#page_config.can_delete}}
        <form action="{{svc}}/nestedfks/{{id}}" method="post" data-ajax="false"
          data-wq-json="true" data-wq-background-sync="false" data-wq-confirm>
          {{>csrf}}
          <input type=hidden name="_method" value="DELETE">
          <button type="submit" data-icon="delete" class="ui-btn-right">
            Delete
          </button>
        </form>
        {{/page_config.can_delete}}
        {{/id}}
      </div>
      <div role="main" class="ui-content">
        <form action="{{svc}}/nestedfks/{{id}}" method="post" data-ajax="false"
            data-wq-json="true"
            {{#outbox_id}}
              data-wq-outbox-id="{{outbox_id}}"
              data-wq-outbox-preserve=""
            {{/outbox_id}}>
          {{>csrf}}
          {{#id}}
          <input type=hidden name="_method" value="PUT">
          {{/id}}
          <ul data-role="listview" data-inset="true">
            <li class="ui-field-contain">
              <label for='nestedfk-name'>Name</label>
              <textarea id='nestedfk-name' name='name' data-xform-type="text" required>{{name}}</textarea>
              <p class='error nestedfk-name-errors'></p>
            </li>
            <li data-role="list-divider">Items</li>
            {{#items}}
            {{^new_attachment}}{{#id}}
            <input type="hidden" name="items[{{@index}}][id]" value="{{id}}">
            {{/id}}{{/new_attachment}}
            <li class="ui-field-contain">
              <label for='nestedfk-items-{{@index}}-type_id'>Item Type</label>
              <select id='nestedfk-items-{{@index}}-type_id' data-xform-type='string' name='items[{{@index}}][type_id]' required>
                <option value="">Select one...</option>
                {{#type_list}}
                <option value="{{id}}"{{#selected}} selected{{/selected}}>
                 {{#outbox}}*{{/outbox}} {{label}}
                </option>
                {{/type_list}}
              </select>
              <p class='error nestedfk-items-{{@index}}-type_id-errors'></p>
            </li>
            <li class="ui-field-contain">
              <label for='nestedfk-items-{{@index}}-name'>Item Name</label>
              <textarea id='nestedfk-items-{{@index}}-name' name='items[{{@index}}][name]' data-xform-type="text" required>{{name}}</textarea>
              <p class='error nestedfk-items-{{@index}}-name-errors'></p>
            </li>
            {{^photo.name}}
            <li class="ui-field-contain">
              {{#photo}}
              <img src="{{photo}}"
                   id="nestedfk-items-{{@index}}-photo-preview">
              {{/photo}}
              {{^photo}}
              <img src="{{rt}}/images/empty.png"
                   id="nestedfk-items-{{@index}}-photo-preview">
              {{/photo}}
              <label for="nestedfk-items-{{@index}}-photo">Photo</label>
              {{#native}}
              <input type="hidden" name="items[{{@index}}][photo]" id="nestedfk-items-{{@index}}-photo"
                     data-wq-type="file" data-wq-preview="nestedfk-items-{{@index}}-photo-preview">
              <div>
                <button type="button" data-inline="true" data-icon="camera" data-mini="true"
                   data-wq-action="take" data-wq-input="nestedfk-items-{{@index}}-photo">
                   Camera
                </button>
                <button type="button" data-inline="true" data-icon="grid" data-mini="true"
                   data-wq-action="pick" data-wq-input="nestedfk-items-{{@index}}-photo">
                   Gallery
                </button>
              </div>
              {{/native}}
              {{^native}}
              <input type="file" name="items[{{@index}}][photo]" id="nestedfk-items-{{@index}}-photo" accept='image/*'
                     data-wq-preview="nestedfk-items-{{@index}}-photo-preview">
              {{/native}}
              <p class="error nestedfk-items-{{@index}}-photo-errors"></p>
            </li>
            {{/photo.name}}
            {{#photo.name}}
            {{#photo}}
            <li class="ui-field-contain">
              <img src="{{image_url}}">
              <label for="nestedfk-items-{{@index}}-photo">Photo</label>
              <input type="text" id="nestedfk-items-{{@index}}-photo" disabled
                  value="{{name}} ({{type}}, {{body.size}} bytes)">
              <p class="error nestedfk-items-{{@index}}-photo-errors"></p>
            </li>
            {{/photo}}
            {{/photo.name}}
            <li class="section-items"></li>
            {{/items}}
            <li>
              <button type="button" data-wq-action="addattachment" data-wq-section="items">
                 Add Items
              </button>
            </li>
            <li data-role="list-divider">Nested</li>
            {{#nested}}
            {{^new_attachment}}{{#id}}
            <input type="hidden" name="nested[{{@index}}][id]" value="{{id}}">
            {{/id}}{{/new_attachment}}
            <li class="ui-field-contain">
              <label for='nestedfk-nested-group_id'>Group</label>
              <select id='nestedfk-nested-group_id' data-xform-type='string' name='nested[group_id]' required>
                <option value="">Select one...</option>
                {{#group_list}}
                <option value="{{id}}"{{#selected}} selected{{/selected}}>
                 {{#outbox}}*{{/outbox}} {{label}}
                </option>
                {{/group_list}}
              </select>
              <p class='error nestedfk-nested-group_id-errors'></p>
            </li>
            <li class="section-nested"></li>
            {{/nested}}
            <li>
              <div class="ui-grid-a">
                <div class="ui-block-a">
                  <a href="{{rt}}/nestedfks/{{id}}" data-role="button" data-icon="back" data-direction="reverse">
                    Back
                  </a>
                </div>
                <div class="ui-block-b">
                  <button type="submit" data-icon="check" data-theme="b">
                    Submit
                  </button>
                </div>
              </div>
              <p class="error nestedfk-errors"></p>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </body>
</html>
