{% extends "layout_1_column.html" %}

{% block title %}
<title>{{ topic.identifier|topic_name(topic_map.identifier) }} | {{ 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') });
</script>

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

{% block content %}
<h1>
    {{ topic_name }}
    <small class="text-muted">Edit topic</small>
</h1>
<hr />
<form action="{{ url_for('topic.edit', map_identifier=topic_map.identifier, topic_identifier=topic.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 or '' }}">
    </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 or '' }}</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(1) == 1 %}
                        <small class="text-danger">
                            A type with this identifier doesn't exist. Please provide an identifier for an existing
                            type.
                        </small>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <label for="topic-text-scope"><strong>Text scope</strong>
                            <small class="text-info">&mdash; If no value is provided the default will be
                                "<strong>{{ session["current_scope"] }}</strong>" (that is,
                                the current scope)
                            </small>
                        </label>
                        <input class="form-control typeahead" id="topic-text-scope" name="topic-text-scope"
                            placeholder="Enter scope identifier" type="text" value="{{ topic_text_scope or '' }}">
                        {% if error|bitwise_and(2) == 2 %}
                        <small class="text-danger">
                            A scope with this identifier doesn't exist. Please provide an identifier for an existing
                            scope.
                        </small>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <br />
    </div>
    <a class="btn btn-secondary"
        href="{{ url_for('topic.view', map_identifier=topic_map.identifier, topic_identifier=topic.identifier) }}"
        role="button">Cancel</a>
    <button class="btn btn-success" type="submit">Update topic</button>
</form>
<br />
{% endblock %}