{% extends "base.html" %}
{% import '_macros.html' as macros %}

{% block title %}Édition | {{ super() }}{% endblock %}


{% block content %}

{% if newrel_form.errors %}
<div class="alert alert-danger">
    Le formulaire contient des erreurs, merci de les corriger
</div>
{% endif %}

<form role="form" method="post" class="form-table add"
      action="{{ url_for('edit', graph_id=graph.id) }}">
{{ newrel_form.hidden_tag() }}
<table class="table table-centered edition">
    <thead>
        <tr>
            <th colspan="2">Personnes</th>
            <th>Type</th>
            <th>Pointillé</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            {{ macros.render_field_table(newrel_form.source) }}
            {{ macros.render_field_table(newrel_form.target) }}
            {{ macros.render_field_table(newrel_form.rtype, class="form-control input-sm") }}
            {{ macros.render_field_table(newrel_form.dotted, class="form-control input-sm") }}
            <td>
                <button type="submit" name="action" value="add"  title="Ajouter"
                        class="btn btn-sm btn-primary">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </td>
        </tr>
        {% for rel in relationships %}
        <tr>
            <td class="name">{{ rel.source.name }}</td>
            <td class="name">{{ rel.target.name }}</td>
            <td>
                <select name="ltype" class="form-control input-sm">
                    {% for rtype in rel_types %}
                    <option value="{{ rtype }}"
                        {% if rtype == rel.type_name %} selected {% endif %}
                        >{{ rtype }}</option>
                    {% endfor %}
                </select>
            </td>
            <td>
                <input name="dotted" type="checkbox" class="form-control input-sm"
                       {% if rel.dotted %}checked{% endif %} />
            </td>
            <td>
                <input type="hidden" name="source" value="{{ rel.source_id }}" />
                <input type="hidden" name="target" value="{{ rel.target_id }}" />
                <input type="hidden" name="origltype" value="{{ rel.type_name }}" />
                <button name="action" value="edit" data-loading-text="..."
                        class="btn btn-sm btn-info" title="Mettre à jour">
                    <span class="glyphicon glyphicon-edit"></span>
                </button>
                <button name="action" value="delete" data-loading-text="..."
                        class="btn btn-sm btn-warning" title="Supprimer">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</form>

{% endblock %}

{% block more_js %}
<script src="{{ url_for('static', filename='typeahead.jquery.min.js') }}"></script>
<script>
$(function() {
    // Autocomplete
    var existingNames = [];
    $('table.edition tbody td.name').each(function() {
        var name = $(this).text();
        if (existingNames.indexOf(name) === -1) {
            existingNames.push(name);
        }
    });
    $('table.table input[type="text"]').typeahead({
        minLength: 3, highlight: true
    }, {
        name: 'persons',
        source: function(query, cb) {
            var suggestions = [];
            existingNames.forEach(function(name) {
                if (name.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
                    suggestions.push({value: name});
                }
            });
            cb(suggestions);
        }
    });
});
</script>
{% endblock %}
