<input type="hidden" name="_csrf" value="<%= _csrf %>"/>

<div ng-controller="ClosetCtrl">
    <h1><%= closet.name %></h1>
    <div class="row data-table-controls">
      <div class="col col-lg-8"></div>
      <div class="col col-lg-2">
        <button class="btn btn-success" ng-disabled="createClosetForm.$invalid" ng-click="createItem()">
          <i class="fa fa-plus-square"></i> Create Item
        </button>
      </div>
      <div class="col col-lg-2">
        <button type="submit" class="btn btn-danger" ng-disabled="createClosetForm.$invalid">
          <i class="fa fa-trash"></i> Delete Item
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col col-lg-12">
        <dtable options="options" rows="data" class="material dt">
          <column name="Name" width="300" flex-grow="2"></column>
          <column name="Gender"></column>
        </dtable>
      </div>
    </div>
  </div>

<v-modal class="vModal--default" onclose="ctrl.close()">
    <v-dialog heading="Create Item" large middle>
    <v-close label="Close"></v-close>

    <h1>Create Closet Item</h1>
    <form name="createClosetItemForm" method="POST" class="form-horizontal" action="/closet/item" novalidate>
      <input type="hidden" name="_csrf" value="<%= _csrf %>"/>
      <div class="form-group">
        <label for="itemname" class="col-sm-3 control-label">Item Name</label>
        <div class="col-sm-7">
          <input type="text" name="itemname" id="itemname" placeholder="Closet Item Name" autofocus class="form-control" ng-model="itemname" ng-required="true" required/>
        </div>
      </div>
      <div class="form-group">
        <label for="itemlocation" class="col-sm-3 control-label">Location</label>
        <div class="col-sm-7">
          <input type="text" name="itemlocation" id="itemlocation" placeholder="Location" autofocus class="form-control" ng-model="itemlocation"/>
        </div>
      </div>
      <div class="form-group">
        <label for="itemtags" class="col-sm-3 control-label">Tags</label>
        <div class="col-sm-7">
          <input type="text" name="itemtags" id="itemtags" placeholder="Closet Item Name" autofocus class="form-control" ng-model="itemtags"/>
        </div>
      </div>
      <button type="submit" class="btn btn-success" ng-disabled="createClosetItemForm.$invalid">
          <i class="fa fa-plus-square"></i>
          Create
      </button>
      <button type="button" class="btn btn-default pull-right" ng-click="ctrl.close()">Cancel</button>
    </form>
  </v-dialog>
</v-modal>

/*global app:false */
'use strict';

app.factory('createItemModal', ['vModal', function (vModal) {
  return vModal({
    controller: 'createItemCtrl',
    controllerAs: 'ctrl',
    templateUrl: '/views/create-closet-item.html'
  });
}]);

app.controller('createItemCtrl', ['createItemModal', function (createItemModal) {
  this.close = createItemModal.deactivate;
}]);

app.controller('ClosetCtrl', ['$rootScope', '$scope', '$routeParams', '$location', 'createItemModal',
function($rootScope, $scope, $routeParams, $location, modal) {

  $scope.createItem = function() {
    modal.activate();
  };

  $scope.options = {
    scrollbarV: false
  };

  $scope.data = [
    { name: 'Austin', gender: 'Male' },
    { name: 'Marjan', gender: 'Male' }
  ];
}]);

app.use(lusca({
  csrf: { angular: true },
  xframe: 'SAMEORIGIN',
  xssProtection: true
}));