<style>
  .image-delete {
    position: absolute;
    font-size: 200%;
    padding: 5px;
    margin-left: -30px;
    color: white;
    background: rgba(1,1,1,0.5);
    cursor: pointer;
  }
  .inline-group {
    display: flex;
    align-items: flex-start;;
  }
  .inline-group label {
    margin-right: 5px;
    flex-basis: 105px;;
  }
</style>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">User </h1>
        <form method="post">
            @{if model.error === true}
            <div class="alert alert-danger">
                @{model.errorMessage}
            </div>
            @{fi}
            <input type="hidden" name="id" value="@{model.id}">
            @{if model.id == 'new'}
                <div class="form-group inline-group">
                    <label>Email *</label>
                    <input type="text" style="width:400px;" class="form-control" maxlength=40 value="@{model.user.email}" name="email" />
                </div>
                <div class="form-group inline-group">
                    <label>Name *</label>
                    <input type="text" style="width:400px;" class="form-control" maxlength=25 value="@{model.user.name}" name="name" />
                </div>
                <div class="form-group inline-group">
                    <label><a href="http://www.generate-password.com/" target="_new">Password</a> *</label>
                    <input type="text" style="width:400px;" class="form-control" maxlength=25 value="@{model.user.password}" name="password" />
                </div>
            @{else}
                <div class="form-group inline-group">
                    <label>Email</label>
                    <input disabled type="text" style="width:400px;" class="form-control" maxlength=40 value="@{model.user.email}"/>
                </div>
                <div class="form-group inline-group">
                    <label>Name *</label>
                    <input type="text" style="width:400px;" class="form-control" maxlength=25 value="@{model.user.name}" name="name" />
                </div>
            @{fi}
            <div class="form-group inline-group">
                <label>Role *</label>
                <select id="#select-role" style="width:400px;" onchange=roleChange() class='select-role form-control' name="role">
                    <option @{if model.user.role == 'restaurant'}selected='selected'@{fi} value='restaurant'>Restaurant</option>
                    <option @{if model.user.role == 'admin'}selected='selected'@{fi} value='admin'>Admin</option>
                </select>
            </div>
			<div class="select-restaurant form-group inline-group">
                <label>Restaurant *</label>
                <select class="form-control" style="width:400px;" size="5" name="restaurant">
                  <option value="none-selected">-</option>
                  @{foreach restaurant in model.restaurants}
                    <option value="@{restaurant.key}" @{if model.user.restaurant === restaurant.key}selected='selected'@{fi}>@{restaurant.Name}</option>
                  @{end}
                </select>
            </div>
            <div class="form-group inline-group">
                <label style="flex-basis: 100px;">Active</label>
                <input style="align-self:center; margin:0;" type="checkbox"  @{if model.user.status} checked @{fi} name="status" />
            </div>
			<hr/>
			<div class="form-group inline-group">
                <label style="flex-basis: 100px;">Statistics</label>
                <input style="align-self:center; margin:0;" type="checkbox"  @{if model.user.hasStatistics} checked @{fi} name="hasStatistics" />
				<label style="flex-basis: 200px;"></label>
				<label style="flex-basis: 100px;">Allergens</label>
                <input style="align-self:center; margin:0;" type="checkbox"  @{if model.user.hasAllergens} checked @{fi} name="hasAllergens" />
            </div>
			<div class="form-group inline-group">
                <label style="flex-basis: 100px;">Lunchmenu</label>
                <input style="align-self:center; margin:0;" type="checkbox"  @{if model.user.hasLunch} checked @{fi} name="hasLunch" />
				<label style="flex-basis: 200px;"></label>
				<label style="flex-basis: 100px;">Drinks</label>
                <input style="align-self:center; margin:0;" type="checkbox"  @{if model.user.hasDrinks} checked @{fi} name="hasDrinks" />
            </div>
            <div class="form-group inline-group">
                <button type="submit" style="width:80px" class="btn btn-primary"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
                &nbsp;&nbsp;
				@{if model.id != 'new' && repository.type == 'admin'}
                <a class="btn btn-default" style="width:80px" href="javascript:void(0)" onclick="if (confirm('Are you sure you want to delete the user @{model.user.email}?')) {document.location.href = '/users/delete/@{model.id}'}"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>
                &nbsp;&nbsp;
                @{fi}
                <a href="/users/" style="width:80px" class="btn btn-default"><i class="fa fa-times" aria-hidden="true"></i> Cancel</a>

            </div>
        </form>
    </div>
</div>
<script src="/vendor/jquery/jquery.min.js"></script>
<script>
    function roleChange() {
      var role = $('.select-role').val();
      if (role !== 'admin') {
        $('.select-restaurant').show();
      } else {
        $('.select-restaurant').hide();
      }
    }
    $(function () {
      var role = $('.select-role').val();
      if (role === 'admin') {
        $('.select-restaurant').hide();
      }

    });
</script>