{{#> layout}}
<header class="page-header">
  <h1>Create a new model</h1>

  <div class="button-row">
    <button id="new-model-btn">
      <i data-feather="save"></i>
      Save
    </button>
    <button class="light">
      <i data-feather="x"></i>
      Discard
    </button>
  </div>
</header>

<section>
  <br>
  <form id="new-model-form">
    <input placeholder="Model name" type='text' name='model-name' />
  </form>
  <br>

  <h3>Fields</h3>

  <p id="no-field-comment" class="comment">There are not any fields yet.</p>
  <ul id="new-model-fields" class="fields">
    
  </ul>

  <br>
  <h5>Add new field</h5>

  <form id="create-model-add-field-form">
    <input name="name" type="text" placeholder="Field name">
    <br>
    <h6>Choose a type</h6>
    <div class="button-row">
      <button type="submit" name="type" value="text" class="wrapped dark">
        <i data-feather="type"></i>
        Text
      </button>
      <button type="submit" name="type" value="image" class="wrapped dark">
        <i data-feather="image"></i>
        Image
      </button>
      <button type="submit" name="type" value="reference" class="wrapped dark">
        <i data-feather="link-2"></i>
        Reference
      </button>

      <select name="reference-select" id="reference-model">
        {{#each models}}
        <option value="{{ this.name }}">{{ this.name }}</option>
        {{/each}}
      </select>
    </div>
  </form>
</section>

<script type='module' src='/scripts/model_crud.js'></script>
{{/layout}}