{% extends "base.html" %}

{% block content %}
<section class="auth-layout auth-layout--full-width">
  <div class="auth-copy">
    <p class="eyebrow">Edge</p>
    <h1>{% if is_edit %}Edit{% else %}Create{% endif %} an edge for {{ overview.graph.display_name }}.</h1>
    <p class="hero-text">
      Connect two node IDs with a typed relationship and optional schema-validated JSON
      data.
    </p>
    <ul class="feature-list">
      <li>Graph: {{ overview.graph.display_name }}.</li>
      <li>Instance: {{ overview.instance.display_name }}.</li>
      <li>Prefix: {{ overview.graph.table_prefix_label }}.</li>
      {% if is_edit and edge_detail %}
      <li>Current version: {{ edge_detail.edge.version }}.</li>
      {% endif %}
    </ul>
  </div>

  <div class="auth-card">
    <h2>{% if is_edit %}Update edge{% else %}New edge{% endif %}</h2>
    <form class="auth-form" action="{{ submit_url }}" method="post">
      {% if is_edit and edge_detail %}
      <label class="field">
        <span>Edge ID</span>
        <input value="{{ edge_detail.edge.id }}" readonly>
      </label>
      {% endif %}

      <label class="field">
        <span>Type</span>
        <input name="type" value="{{ (form_data or {}).get('type', '') }}" required>
      </label>

      <label class="field">
        <span>Source ID</span>
        <input name="source_id" value="{{ (form_data or {}).get('source_id', '') }}" required>
      </label>

      <label class="field">
        <span>Target ID</span>
        <input name="target_id" value="{{ (form_data or {}).get('target_id', '') }}" required>
      </label>

      <label class="field">
        <span>Schema</span>
        <select id="edge-schema-name" name="schema_name">
          <option value="">No schema</option>
          {% for schema_name in schema_names %}
          <option value="{{ schema_name }}" {% if (form_data or {}).get('schema_name', '') == schema_name %}selected{% endif %}>{{ schema_name }}</option>
          {% endfor %}
        </select>
        <small>Only edge schemas are shown here.</small>
      </label>

      <label class="field">
        <span>Tags</span>
        <input name="tags" value="{{ (form_data or {}).get('tags', '') }}" placeholder="alpha, beta">
      </label>

      <section
        class="schema-editor-card"
        data-jedison-root
        data-mode="form"
        data-schema-select-id="edge-schema-name"
        data-json-field-id="edge-data-json"
      >
        <div class="schema-editor-card__header">
          <h3>Schema Editor</h3>
        </div>
        <div class="schema-editor-card__body" data-jedison-mount></div>
        <p class="schema-editor-card__status" data-jedison-status></p>
        <script type="application/json" data-jedison-schema-map>{{ schema_json_map | tojson }}</script>
      </section>

      <label class="field">
        <span>Raw JSON</span>
        <textarea id="edge-data-json" name="data" rows="14" required>{{ (form_data or {}).get('data', '') }}</textarea>
      </label>

      <div class="button-row">
        <button class="button" type="submit">{% if is_edit %}Save changes{% else %}Create edge{% endif %}</button>
        <a class="button button-secondary" href="{% if is_edit and edge_detail %}{{ web_app.url_path_for('graph_edge_detail_page', graph_id=overview.graph.id, edge_id=edge_detail.edge.id) }}{% else %}{{ web_app.url_path_for('graph_edge_list_page', graph_id=overview.graph.id) }}{% endif %}">Back</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jedison.umd.js') }}"></script>
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jedison-form.js') }}"></script>
{% endblock %}