{% extends "layout_notes.html" %}

{% block title %}
<title>Convert note | {{ topic_map.name }}</title>
{% endblock %}

{% block javascript %}
<link href="https://unpkg.com/easymde/dist/easymde.min.css" rel="stylesheet">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

<script>
  var editor = new EasyMDE({ element: document.getElementById("topic-text") });

  document.getElementById("topic-name").addEventListener("blur", (event) => {
    var topicName = document.getElementById("topic-name").value;
    if (topicName !== "") {
      axios
        .get("/api/get-slug?value=" + topicName)
        .then(function (response) {
          // Handle success
          document.getElementById("topic-identifier").value = response.data.slug;
        })
        .catch(function (error) {
          // Handle error
          console.log(error);
        })
        .then(function () {
          // Always executed
        });
    }
  });

  var topicIdentifierInput = document.getElementById("topic-identifier");

  document
    .getElementById("edit-identifier-button")
    .addEventListener("click", (event) => {
      if (topicIdentifierInput.readOnly) {
        topicIdentifierInput.readOnly = false;
        topicIdentifierInput.focus();
        document.getElementById("edit-identifier-button").innerHTML = "Ok";
      } else {
        topicIdentifierInput.readOnly = true;
        document.getElementById("edit-identifier-button").focus();
        document.getElementById("edit-identifier-button").innerHTML = "Edit";
      }
    });
</script>

{% if error %}
<script>
  $('#advancedOptions').collapse('show');
</script>
{% endif %}
{% endblock %}

{% block content %}
<h1>
  {{ topic_map.name }}
  <small class="text-muted">Convert note</small>
</h1>
<hr />
<form action="{{ url_for('note.convert', map_identifier=topic_map.identifier, note_identifier=note_identifier) }}"
  autocomplete="off" method="post" role="form">
  <input name="_csrf_token" type="hidden" value="{{ csrf_token() }}">
  <div class="form-group">
    <label for="topic-name"><strong>Name</strong></label>
    <input class="form-control" id="topic-name" name="topic-name" placeholder="Enter name" required autofocus
      type="text" value="{{ topic_name }}">
  </div>
  <div class="form-group">
    <label for="topic-identifier"><strong>Identifier</strong></label>
    <div class="input-group">
      <input class="form-control" id="topic-identifier" name="topic-identifier" placeholder="Enter identifier" readonly
        required type="text" value="{{ topic_identifier }}">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" id="edit-identifier-button" type="button">
          Edit
        </button>
      </div>
    </div>
    {% if error|bitwise_and(2) == 2 %}
    <small class="text-danger">
      A topic with this identifier already exists. Please provide a different topic identifier.
    </small>
    {% endif %}
  </div>
  <div class="form-group">
    <label for="topic-text"><strong>Text</strong></label>
    <textarea class="form-control" id="topic-text" name="topic-text" rows="8">{{ topic_text }}</textarea>
  </div>
  <p><i class="fas fa-info-circle"></i> <a aria-controls="advancedOptions" aria-expanded="false" data-toggle="collapse"
      href="#advancedOptions"> Advanced options</a></p>
  <div class="collapse" id="advancedOptions">
    <div class="card">
      <div class="card-header">
        Advanced options
      </div>
      <div class="card-body">
        <div class="card-text">
          <div class="form-group">
            <label for="topic-instance-of"><strong>Type</strong>
              <small class="text-info">&mdash; If no value is provided the default will be "topic"</small>
            </label>
            <input class="form-control typeahead" id="topic-instance-of" name="topic-instance-of"
              placeholder="Enter type identifier" type="text" value="{{ topic_instance_of or '' }}">
            {% if error|bitwise_and(8) == 8 %}
            <small class="text-danger">
              A type with this identifier doesn't exist. Please provide an identifier for an existing
              type.
            </small>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <br />
  </div>
  <a class="btn btn-secondary" href="{{ url_for('note.index', map_identifier=topic_map.identifier) }}"
    role="button">Cancel</a>
  <button class="btn btn-success" type="submit">Convert note</button>
</form>
<br />
{% endblock %}