<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="text-center well well-sm page-header"> <h1>Edit or Create a Session</h1> </div> <div class="well well-sm"> <!--<form> <fieldset class="form-group"> --> <div class="row"> <div class="col-xs-12"> <label for="session-editor-title">Session Title</label> <textarea class="form-control" id="session-editor-title" rows="1" maxlength="30">{{selectedSession.SessionTitle}}</textarea> <small class="text-muted">Give me the name for this cooking session. Use capital letters as in a book title, like Anniversary Cookout (30 characters max)</small> </div> </div> <!--</fieldset> <fieldset class="form-group">--> <div class="row"> <div class="col-xs-12"> <br> <label>Recipe</label> <small class="text-muted">Choose the recipe used for this cooking session.</small> <button type="button" class="btn btn-default do-recipe-picker-modal pull-right">Choose Recipe</button> </div> <!--</fieldset> --> </div> <div class="row"> <div class="col-xs-12"> <div class="accordion"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading-one"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" class="collapsed" href="#session-edit-recipe-view"> {{selectedRecipe.RecipeTitle}} </a> </h4> </div> <div id="session-edit-recipe-view" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body"> {{>viewrecipeindropdown recipe=selectedRecipe}} </div> </div> </div> </div> </div> </div> <!--<fieldset class="form-group"> --> <div class="row"> <div class="col-xs-12"> <label for="session-editor-target-picker">Target Temperature</label> <input class="form-control" id="session-editor-target-picker" min="130" max="250" type="number" value = "{{selectedSession.TargetTemp}}"/> <small class="text-muted">Choose the target temperature for this session </small> </div> </div> <!--</fieldset> <fieldset class="form-group"> --> <div class="row"> <div class="col-xs-12"> <br> <label for="session-editor-comments">Comments</label> <textarea class="form-control" id="session-editor-comments" rows="2" maxlength="200">{{selectedSession.SessionNotes}}</textarea> <small class="text-muted">Say anything unique about this session. (200 characters max)</small> </div> </div> <!--</fieldset> --> <div class="row"> <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3" id="container-session-editor-graph">Graph goes Here</div> </div> <div class="row"> <div class="col-xs-12"> <button type="button" class="btn btn-primary pull-right" name="pick-date-button" value="pick-date-button" id="pick-date-button">Pick New Date Range</button> <button type="button" class="btn btn-primary pull-right" name="use-session-dates-button" value="use-session-dates-button" id="use-session-dates-button">Use Dates From Original Session</button> </div> </div> <div class="row"> <div class="col-xs-12"> <button type="button" class="btn btn-default action-restrict" name="preview-session-button" value="preview-session-button" id="preview-session-button">Preview</button> <button type="button" class="btn btn-primary action-restrict" name="save-session-button" value="save-session-button" id="save-session-button">Save Changes to This Session</button> <button type="button" class="btn btn-info action-restrict" name="save-new-session-button" value="save-new-session-button" id="save-new-session-button">Save as a New Session</button> <button type="button" class="btn btn-danger action-restrict" name="delete-session-button" value="delete-session-button" id="delete-session-button">Delete This Session</button> </div> </div> <!--</form>--> </div> </div>