[JavaScript:{ jsname: "JQuery" }]
<!-- development version, includes helpful console warnings -->
[JavaScript:{ path: "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"}]
<!-- production version, optimized for size and speed -->
<!--[JavaScript:{ path: "https://cdn.jsdelivr.net/npm/vue@2"}]-->
[JavaScript:{ path: "~/Resources/Shared/scripts/dnn.jquery.js"}]
[JavaScript:{ path: "~/DesktopModules/<%= friendlyName %>/scripts/ItemView.js"}]

[ModuleAction:{controlKey : "Edit", securityAccessLevel : "Edit",  titleKey: "EditModule", localResourceFile: "~/DesktopModules/<%= friendlyName %>/App_LocalResources/View.resx" }]

<div id="vue-app-wrapper-[ModuleContext:ModuleId]">
    <div id="app-[ModuleContext:ModuleId]">
        <h3>Item list </h3>
        <div>
            <a @click="loadItems" href="#">[Resx:{key:"Refresh"}]</a>
            <a v-if="userCanAdd" @click="addItem" href="#">[Resx:{key:"EditModule"}]</a>
        </div>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th v-if="settings.itemId">Id</th>
                    <th v-if="settings.name">Name</th>
                    <th v-if="settings.description">Description</th>
                    <th v-if="settings.createdOnDate">Created on</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr class="tm_t" v-for="(item, index) in items" :key="item.id">
                    <td v-if="settings.itemId">{{item.itemId}}</td>
                    <td v-if="settings.name">{{item.name}}</td>
                    <td v-if="settings.description">{{item.description}}</td>
                    <td v-if="settings.createdOnDate">{{item.createdOnDate}}</td>
                    <td>
                        <button v-if="userCanAdd" type="button" class="btn btn-sm" title="Edit item" @click="editItem(item)">
                            <i class="glyphicon glyphicon-edit"></i>
                        </button>
                        <button v-if="userCanAdd" type="button" class="btn btn-sm btn-danger" title="Remove item" @click="deleteItem(item.itemId)">
                            <i class="glyphicon glyphicon-remove"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-if="showModal" class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" :style="{display: showModal ? 'block' :'none'}">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" @click="cancelAdd" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 v-if="item.itemId > 0" class="modal-title" id="myModalLabel">Edit Item</h4>
                        <h4 v-else class="modal-title" id="myModalLabel">Create Item</h4>
                    </div>
                    <div class="modal-body">
                        <div class="dnnForm dnnEditBasicSettings" id="dnnEditBasicSettings">
                            <fieldset>
                                <div class="dnnFormItem">
                                    <div><label for="itemName">[Resx:{key:"lblName"}]</label></div>
                                    <input id="itemName" type="text" v-model="item.name" />
                                </div>
                                <div class="dnnFormItem">
                                    <div><label for="itemDescription">[Resx:{key:"lblDescription"}]</label></div>
                                    <textarea id="itemDescription" cols="20" rows="5" v-model="item.description"></textarea>
                                </div>
                                <div class="dnnFormItem">
                                    <div><label for="itemUser">[Resx:{key:"lblAssignedUser"}]</label></div>
                                    <select v-model="item.assignedUser">
                                        <option v-for="user in users" v-bind:value="user.id">
                                            {{ user.name }}
                                        </option>
                                    </select>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="cancelAdd">Close</button>
                        <button type="button" class="btn btn-primary" @click="saveChanges">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script language="javascript" type="text/javascript">
    jQuery(function ($) {
        <%= friendlyName %>.InitApp("[ModuleContext:ModuleId]", '[ModuleContext:EditMode]' === 'True', "[AntiForgeryToken:true]");
    });

</script>