{% extends 'base.html.twig' %}

{% block title %}Notes overview{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block content %}

    <header class="content__title">
        <h1>Notes overview <small>Configure your notes</small></h1>
    </header>

    <p><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addNoteModal">Add new notepad</button></p>

    <table class="table">
        <thead class="thead-light">
        <tr>
            <th>Title</th>
            <th>Public</th>
            <th>Owner</th>
            <th>Visible for</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {% for note in notes %}
        <tr>
            <td><a href="{{ path('note', {id : note.getId}) }}">{{ note.getTitle }}</a></td>
            <td>
                <div class="form-group">
                    <div class="toggle-switch">
                        <input type="checkbox" data-id="{{ note.getId }}" class="toggle-switch__checkbox note_set_public"{% if note.public %} checked{% endif %}{% if app.user != note.user %} disabled{% endif %}>
                        <i class="toggle-switch__helper"></i>
                    </div>
                </div>
            </td>
            <td>{{ note.getUser.getName }}</td>
            <td class="note_visible_for">
                {% for tmpUser in note.getAuthorizedUser %}
                    {{ tmpUser.getName ~ (not loop.last ? ', ') }}
                {% endfor %}
            </td>
            <td>
                <button class="btn btn-theme" data-toggle="modal" data-target="#renameModal-{{ note.getId }}" {% if app.user != note.user %} disabled{% endif %}>Rename</button>
                <button class="btn btn-theme" data-toggle="modal" data-target="#clearModal-{{ note.getId }}"{% if app.user != note.user %} disabled{% endif %}>Clear</button>
                <button class="btn btn-theme" data-toggle="modal" data-target="#deleteModal-{{ note.getId }}"{% if app.user != note.user %} disabled{% endif %}>Delete</button>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    <!-- Add Modal -->
    <div class="modal fade" id="addNoteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title pull-left">Add new notepad</h5>
                </div>
                <form action="{{ path('notes_add') }}" method="post" enctype="multipart/form-data">
                    <div class="modal-body">

                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" placeholder="Title of notepad" required>
                            </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-link">Save changes</button>
                        <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {% for note in notes %}
        <!-- Rename Modal -->
        <div class="modal fade" id="renameModal-{{ note.getId }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title pull-left">Rename notepad</h5>
                    </div>
                    <form action="{{ path('notes_rename') }}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ note.getId }}">
                        <div class="modal-body">

                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" name="title" class="form-control" value="{{ note.getTitle }}" placeholder="Title of notepad" required>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-link">Save changes</button>
                            <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Clear Modal -->
        <div class="modal fade" id="clearModal-{{ note.getId }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title pull-left">Clear notepad</h5>
                    </div>
                    <form action="{{ path('notes_clear') }}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ note.getId }}">

                        <div class="modal-body">
                            Are you sure you want to delete all entries in this note list?
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-link">Yes</button>
                            <button type="button" class="btn btn-link" data-dismiss="modal">No</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Delete Modal -->
        <div class="modal fade" id="deleteModal-{{ note.getId }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title pull-left">Delete notepad</h5>
                    </div>
                    <form action="{{ path('notes_delete') }}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ note.getId }}">

                        <div class="modal-body">
                            Are you sure you want to delete this list with all its entries?
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-link">Yes</button>
                            <button type="button" class="btn btn-link" data-dismiss="modal">No</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    {% endfor %}

    {#% include 'footer.html.twig' %#}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script>
        $('.note_set_public').change(function(){
            var noteId     = $(this).data('id');
            var visibleFor = $(this).closest('tr').find('.note_visible_for');

            $.post( "{{ path('notes_toggle_public') }}", { id: noteId })
                .done(function( data ) {
                    visibleFor.html(data.visibleFor);
                });
        });
    </script>

{% endblock %}