<template name="feedback">
    {{> header}}
    <main>
        <h3 class="black-text thin text-center">Feedback</h3>
        <a class="waves-effect waves-light btn modal-trigger feedback-btn" href="#modal1">Send New Feedback</a>
        <a id="editModal" class="modal-trigger" href="#editFeedback" style="display:none"></a>

        <div class="row">
            {{#each feedback}}
                <div class="col s12 m4">
                    <div class="card blue-grey darken-1">
                        <div class="card-content white-text">
                            {{#if isAdmin}}
                                <div class="fixed-action-btn horizontal float-btn" style="bottom: 45px; right: 24px;">
                                    <a class="btn-floating btn-large red">
                                        <i class="large material-icons">more_vert</i>
                                    </a>
                                    <ul>
                                        <li><a id="edit" class="btn-floating green"><i
                                                class="material-icons">create</i></a></li>
                                        <li><a id="delete" class="btn-floating red"><i class="material-icons">delete</i></a>
                                        </li>
                                    </ul>
                                </div>
                            {{/if}}
                            <p>{{message}}</p>
                        </div>
                        <div class="card-action">
                            <a class="lowercase" href="/u/{{username}}">{{username}}</a>
                            <i class="material-icons upvote">thumb_up</i>
                            <p class="upvote-text">{{upvotes}}</p>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    </main>
    <div id="modal1" class="modal">
        <div class="modal-content teal darken-4">
            <div class="input-field">
                <textarea id="feedback_message" class="materialize-textarea" length="500"></textarea>
                <label for="feedback_message">Give us your feedback and suggestions!</label>
            </div>
            <a id="feedback_submit" class="waves-effect waves-light btn">Submit</a>
        </div>
    </div>
    <div id="editFeedback" class="modal">
        <div class="modal-content teal darken-4">
            <label>Edit Feedback Message</label>
            <div class="input-field">
                <textarea id="edit_feedback_message" class="materialize-textarea" length="500"></textarea>
            </div>
            <a id="edit_feedback_submit" class="waves-effect waves-light btn">Submit</a>
        </div>
    </div>
    {{> footer}}
    <script>
        $(document).ready(function () {
            $('#feedback_message').characterCounter();
            $("#edit_feedback_message").characterCounter();
            $('.modal-trigger').leanModal();
        });
    </script>
</template>