{% extends "base.html" %}

{% block title %}new artifact — gest{% endblock %}
{% block nav_artifacts %}class="active"{% endblock %}

{% block content %}
<div class="summary"><a href="/artifacts">&larr; artifacts</a></div>

<h1 class="section-heading">New Artifact</h1>

<form method="post" action="/artifacts">
  <p class="visually-hidden">Fields marked with * are required.</p>
  <div class="form-group">
    <label for="title">Title <span class="c-error" aria-hidden="true">*</span></label>
    <input type="text" id="title" name="title" class="form-input{% match error %}{% when Some with (_) %} input-error{% when None %}{% endmatch %}" value="{{ title }}" aria-required="true" />
    {% match error %}
    {% when Some with (msg) %}
    <span class="form-error">{{ msg }}</span>
    {% when None %}
    {% endmatch %}
  </div>

  <div class="form-group">
    <label for="kind">Type</label>
    <input type="text" id="kind" name="kind" class="form-input" value="{{ kind }}" />
  </div>

  <div class="form-group">
    <label for="tags">Tags <span class="c-pewter">(comma-separated)</span></label>
    <input type="text" id="tags" name="tags" class="form-input" value="{{ tags }}" />
  </div>

  <div class="form-group md-preview-container">
    <label for="body">Body</label>
    <button type="button" class="btn md-preview-btn md-preview-toggle" data-target="body">Preview</button>
    <textarea id="body" name="body" class="form-textarea" rows="12">{{ body }}</textarea>
    <div id="body-preview" class="md-preview md-content"></div>
  </div>

  <div class="form-group">
    <button type="button" id="rel-toggle" class="btn" aria-expanded="false" aria-controls="rel-modal">Relationships</button>
    <div id="rel-modal" class="rel-modal" role="dialog" aria-label="Add relationship">
      <div class="rel-types">
        <button type="button" class="rel-type-btn" data-rel="relates-to">relates to</button>
        <button type="button" class="rel-type-btn" data-rel="blocks">blocks</button>
        <button type="button" class="rel-type-btn" data-rel="blocked-by">blocked by</button>
        <button type="button" class="rel-type-btn" data-rel="parent-of">parent of</button>
        <button type="button" class="rel-type-btn" data-rel="child-of">child of</button>
      </div>
      <input type="text" class="form-input rel-search-input" placeholder="Search tasks and artifacts…" aria-label="Search tasks and artifacts">
      <div class="rel-results"></div>
      <div class="rel-pending"></div>
      <div class="rel-hidden-inputs"></div>
    </div>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Create Artifact</button>
  </div>
</form>
{% endblock %}