
<div class="container-fluid dashboard-content">
    <!-- Header -->
    {% set title = "Raw Entries List" %}
    {% set navigation = [('Entries', '')] %}
    {% include 'include_header.html' %}
    {%  set is_admin = current_user.is_admin %}
    {% set is_manager = current_user.is_manager %}

    <!-- table row -->
    <input type="hidden" value="09:00:00.000", id="hour_id">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="projects-table" class="table">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>date</th>
                                <th>type</th>
                                <th>title</th>
                                <th>description</th>
                                <th>extra</th>
                                <th>project id</th>
                                <th>created</th>
                                <th>created by</th>
                                <th>last updated</th>
                                <th>last updated by</th>
                                {% if is_admin %}
                                    <th>actions</th>
                                {% endif %}
                            </tr>
                            </thead>
                            <tbody>
                            {% for e in entries %}
                                <tr>
                                    <td>{{ e.id }}</td>
                                    <td>{{ e.date|pretty_date }}</td>
                                    <td>{{ e.type }}</td>
                                    <td>{{ e.title }}</td>
                                    <td>{{ e.description }}</td>
                                    <td id={{ "entry-%s-extra"|format(e.id) }} >{{ e.extra|tojson }}</td>
                                    <td>{{ e.project_id }}</td>
                                    <td>{{ e.creation_date|pretty_datetime }}</td>
                                    <td>{{ e.creation_user.name }}</td>
                                    <td>{{ e.last_update_date|pretty_datetime }}</td>
                                    <td>{{ e.last_update_user.name }}</td>
                                    <td>
                                    {% if is_admin %}
                                        <div class="col-1"><a href="javascript:editEntry({{ e.id }})"><i class="fas fa-edit"></i>   </a></div>
                                        <div class="col-1"><a href="javascript:deleteEntry({{ e.id }}, '{{ e.title }}')"><i class="fas fa-trash-alt"></i></a></div>
                                    {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}


                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end table row -->

</div>

<!-- ============================================================== -->
<!-- Project Modal -->
<!-- ============================================================== -->
<div class="modal fade" id="entry-modal" tabindex="-1" role="dialog" aria-labelledby="projectModal" aria-hidden="true" >
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document" style="max-width: 80%">
        <div class="modal-content">

            <div class="modal-header">
            <h3 class="modal-title" id="entry-modal-title"> Entry </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body">
            <div class="form-group row">
                <label class="col-12 col-sm-3 col-form-label text-sm-right">Extra (Json)</label>
                <div class="col-12 col-sm-8 col-lg-6">
                    <div id="editor"></div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
          <button type="button" id="entry-btn-cancel"  class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
            <button class="btn btn-outline-dark" onclick="javascript:onEntryUpdate()">Update</button>
      </div>

        </div>
    </div>
</div>

<style type="text/css" media="screen">
    #editor {
        position: relative;
        width: 100%;
        height: 400px;
    }
</style>

<script>

    var editor = null;
    var last_entry = null;

    (function(window, document, $, undefined) {
    "use strict";

    $('#projects-table').DataTable({
    sDom: 'lfrtip',
    paging: false,
    info: false,
    order: [[ 0, "desc" ]]
    //ordering: false
    });

    $('select').selectpicker();

    editor = ace.edit("editor");
    //editor.renderer.setShowGutter(false);
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/json");

})(window, document, window.jQuery);

    /* Show the Form, either for updating or creating a new one */
function editEntry(entryId) {
    last_entry = entryId;
    var extra = "entry-" + entryId + "-extra";
    var extraJson = JSON.parse(document.getElementById(extra).textContent)
    document.getElementById('entry-modal-title').textContent = "Entry " + entryId;
    editor.setValue(JSON.stringify(extraJson, null, 4));
    $('#entry-modal').modal('show');
}  // function showApplication

        /* Show the Form, either for updating or creating a new one */
function onEntryUpdate() {
    var entry = {
        id: last_entry,
        extra: JSON.parse(editor.getValue())
    };
    var formData = new FormData();
    formData.append('attrs', JSON.stringify(entry));
     send_ajax_form(Api.urls.entry.update, formData, entryAjaxDone);
}  // function showApplication

</script>