{% extends "base.html" %}
{% block title %}{{ flag.title }} - Flag | Sh00t{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/simplemde.min.css">
{% endblock %}
{% block page %}
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="/app/flags/all">All Flags</a></li>
    <li class="breadcrumb-item"><a href="/app/flags/open/">Open Flags</a></li>
    <li class="breadcrumb-item active"><i class="fa fa-flag"></i> {{ flag.title }} <span id="response" class="small"></span></li>
</ol>
<div class="row">
    <div class="col-lg-6">
        <form role="form" method="post">
            {% if "success" == submitted %}
                <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-info alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <i class="fa fa-info-circle"></i> Updated
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="form-group">
                <label for="title">Title</label>
                <input class="form-control" name="title" id="title" value="{{ flag.title }}"
                       autocomplete="off" />
            </div>
            <div class="form-group">
                <label for="note">Note</label>
                <textarea class="form-control" rows="15" name="note" id="note">{{ flag.note }}</textarea>
            </div>
            <div class="form-group">
                <label for="assessment">Assessment</label>
                <select class="form-control" name="assessment" id="assessment">
                {% for assessment in assessments %}
                    <option value="{{ assessment.id }}"
                    {% if assessment.id == flag.assessment.id %}
                        selected="selected"
                    {% endif %}>
                    {{ assessment.name }}</option>
                {% endfor %}
                </select>
            </div>
           <div class="custom-control custom-checkbox mb-3">
              <input type="checkbox" class="custom-control-input" name="done" id="done"
                     {% if True == flag.done %} checked {% endif %}>
              <label class="custom-control-label" for="done">Done</label>
            </div>
            <input type="hidden" value="{{ flag.id }}" id="id" />
            <button type="submit" class="btn btn-primary">Update</button>
            <button type="submit" name="delete" value="delete" class="btn btn-danger">Delete</button>
            {% csrf_token %}
        </form>
    </div>
</div>
{% endblock %}
{% block extra_foot %}
<script src="/static/js/common-ajax.js"></script>
<script type="text/javascript">
    $('#note').on('input', function() {
        sync('flag');
    });
    $('#title').on('input', function() {
        sync('flag');
    });
    $('#done').on('change', function() {
        sync('flag');
    });
    $('#assessment').on('change', function() {
        sync('flag');
    });
</script>
<script src="/static/js/simplemde.min.js"></script>
<script>
    var simplemde = new SimpleMDE({
        element: document.getElementById("note"),
        autosave: {
            enabled: true,
            uniqueId: "Sh00tFlagSingleNote{{ flag.id }}",
            delay: 1000,
        },
    });
</script>
{% endblock %}