<div style="width: 95%; margin-left: auto; margin-right: auto;">
    @(Html.Kendo().Grid<ConfigProject>()
      .Name("projects-grid")
      .Columns(c =>
          {
              c.Bound(m => m.Name);
              c.Bound(m => m.Id);
              c.Bound(m => m.Description);
              c.Command(command =>{command.Edit(); command.Destroy(); }).Width(170);
          })
      .ToolBar(toolbar=>toolbar.Create())
      .Editable(editable=>editable.Mode(GridEditMode.PopUp))
      .Scrollable()
      .Pageable()
      .Sortable()
      .DataSource(datasource => datasource
        .Ajax()
        .Model(model => model.Id(p => p.Id))
        .Read(read => read.Action("ProjectsRead","ConfigEditor",new {Area="Config"}))
        .Create(create => create.Action("CreateProject", "ConfigEditor",new {Area="Config"}))
        .Update(update => update.Action("ProjectUpdate", "ConfigEditor",new {Area="Config"}))        
        .Destroy(destroy => destroy.Action("ProjectDestroy", "ConfigEditor",new {Area="Config"}))
      )
      .ClientDetailTemplateId("detail-template")
      .Resizable(resize => resize.Columns(true))
      .HtmlAttributes(new { style = "height:550px;" })
    )
</div>

<script id="detail-template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
          .Name("tabStrip_#=Id#")
          .SelectedIndex(0)
          .Items(items =>
              {
                  items.Add().Text("Config Settings").Content(@<text>
                    @(Html.Kendo().Grid<ConfigSetting>()
                          .Name("projects-setttings_#=Id#")
                          .Columns(columns =>
                              {
                                  columns.Bound(o => o.Key);
                                  columns.Bound(o => o.Value);
                                  columns.Bound(o => o.Description);
                                  columns.Command(command => command.Destroy()).Width(110);
                              })
                          .ToolBar(toolbar => {
                                toolbar.Create();
                                toolbar.Save();      
                          })
                          .Editable(editable => editable.Mode(GridEditMode.InCell))
                          .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .PageSize(8)
                                .Model(model => model.Id(cs => cs.Key))
                                .Read(read => read.Action("GetConfigsForProject", "ConfigEditor", new { Area="Config", projectID = "#=Id#" }))
                                .Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area="Config", projectID="#=Id#"}))
                                .Update( update => update.Action("EditSettings", "ConfigEditor", new{Area="Config",projectID="#=Id#"}))
                                .Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new {Area ="Config",projectID="#=Id#"}))
                          )
                          .Events(e=>e.Edit("readonlyifyKey"))
                          .Resizable(resize => resize.Columns(true))
                          .Pageable()
                          .Sortable()
                          .ToClientTemplate())
                </text>                        
                      );
                  
                  items.Add().Text("Authorized Users").Content(@<text>
                    @(Html.Kendo().Grid<ConfigAdminUserModel>()
                          .Name("projects-AdminUsers_#=Id#")
                          .Columns(columns =>
                              {
                              columns.Bound(o => o.UserId).Visible(false);
                              columns.Bound(o => o.User).ClientTemplate("#=User.UserName#");
                              columns.Command(command => command.Destroy()).Width(110);
                          })
                          .ToolBar(toolbar =>
                          {
                              toolbar.Create();
                              toolbar.Save();
                          })
                          .Editable(editable => editable.Mode(GridEditMode.InCell))
                          .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .ServerOperation(false)
                                .Model(model =>
                                    {
                                        model.Id(cs => cs.UserId);
                                        model.Field(cs => cs.UserId).Editable(false);
                                        model.Field(cs => cs.User).DefaultValue(
                                            ViewData["defaultUser"] as ConfigAdminUser);
                                    })
                                .Read(read => read.Action("AdminUserRead", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                                .Create(create => create.Action("CreateSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                                .Update(update => update.Action("EditSettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                                .Destroy(destroy => destroy.Action("DestroySettings", "ConfigEditor", new { Area = "Config", projectID = "#=Id#" }))
                          )
                          .Pageable()
                          .Sortable()
                          .ToClientTemplate())
                </text>                        
                      );
                      
                      
                  items.Add().Text("Team Contact Information").Content(
                    "<div class='team-contact-details'>" +
                    "<ul>" +
                    "<li><label>Name: </label>#= Team.Name #</li>" +
                    "<li><label>Description: </label>#= Team.Description #</li>" +
                    "<li><label>Email: </label>#= Team.Email #</li>" +
                    "<li><label>Pager: </label>#= Team.Pager #</li>" +
                    "</ul>" +
                    "</div>"
                    );           
              })
          .ToClientTemplate())
</script>