{% extends ctx.module + "/base.j2" %}
{% set title = "Add" %}

{% block body -%}
<div class="container">
  <form method="post">
    {%- if class is defined %}
    <div class="field">
      <label class="label" for="path">Path</label>
      <div class="control">
        <input type="text" class="input" id="path" name="path" value="{{ path }}" readonly>
      </div>
    </div>
    <div class="columns is-desktop">
      <div class="column">
        <div class="field">
          <label class="label" for="name">Name</label>
          <div class="control">
            <input type="text" class="input" id="name" name="name" placeholder="foo-test" value="{{ name }}"{% if class is defined %} required{% endif %}>
          </div>
          <p class="help">Identifier available to other hooks, in order to reference this instance in config.</p>
        </div>
      </div>
      {%- if hook %}
      <div class="column is-one-third-widescreen">
        <div class="field">
          <label class="label" for="priority">Priority</label>
          <div class="control">
            <input type="number" class="input" id="priority" name="priority" value="{{ priority }}" min="1">
          </div>
          <p class="help">Optional ordering constraint.  If set, this hook will process messages ahead of unordered hooks, and relative to other ordered hooks.</p>
        </div>
      </div>
      {%- endif %}
    </div>
    <div class="field">
      <label class="label" for="config">Config</label>
      {%- if class.schema %}
      <div class="control">
        <div id="config-editor"></div>
        <textarea id="config" name="config" class="textarea is-small json-editor" data-editor="config-editor"{% if class is defined %} data-schema="{{ class.schema.json|json }}"{% endif %}>{{ config or "{}" }}</textarea>
      </div>
      {%- else %}
      <p>No config required.</p>
      {%- endif %}
    </div>
    <div class="field is-grouped">
      <div class="control">
        <button class="button is-success" type="submit"><i class="fas fa-fw fa-plus"></i> Add</button>
      </div>
    </div>
    {%- else %}
    <div class="field">
      <label class="label" for="path">Path</label>
      <div class="field has-addons">
        <div class="control is-expanded">
          <input type="text" class="input" id="path" name="path" pattern=".+\..+" placeholder="module.FooPlug" value="{{ path }}" required>
        </div>
        <div class="control">
          <button name="schema" class="button" type="submit"><i class="fas fa-fw fa-tasks"></i> Load</button>
        </div>
      </div>
      <p class="help">Full path to your plug or hook class.  External modules must be present on the system path, either installed to a default directory or one added to <code>sys.path</code>.</p>
    </div>
    {%- endif %}
  </form>
</div>
{%- endblock %}
