<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" data-ng-app="cycle">
  <head th:substituteby="fragment/common :: head">

  </head>
  <body ng-controller="DefaultController">
    <div class="wrapper">
      <div th:substituteby="fragment/common :: navigation-logged-in"></div>
      <div class="container-fluid content-container content-inset">
        <div th:substituteby="fragment/common :: breadcrumbs"></div>
        <div data-error-panel></div>
        <div class="row-fluid content-container">
          <div class="span3" id="navigation">
            <div class="well sidebar-nav" id="roundtrip-list" ng-controller="ListRoundtripsController">
              <ul class="nav nav-list" id="roundtrip-links">
                <li class="nav-header" th:text="#{My Roundtrips}">My Roundtrips</li>
                <li ng-repeat="roundtrip in roundtrips" class="roundtrip-link-{{roundtrip.id}}" ng-class="activeClass(roundtrip)" ng-cloak>
                  <a ng-click="selectRoundtrip(roundtrip)" href="#/roundtrip/{{roundtrip.id}}">{{roundtrip.name}}</a>
                </li>
                <li class="actions">
                  <a class="btn" data-ng-click="createNew()"><span th:text="#{Create}">Create</span></a>
                  <a class="btn" data-ng-disabled="!selectedRoundtripId" data-ng-click="deleteRoundtrip()"><span th:text="#{Delete}">Delete</span></a>
                </li>
              </ul>
              <!-- begin create-roundtrip-dialog -->
              <modal-dialog model="newRoundtripDialog" ng-cloak>
                <div class="modal" ng-controller="CreateRoundtripController" ngm-if="newRoundtripDialog.renderHtml()">
                  <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <h3 th:text="#{Create roundtrip}">Create roundtrip</h3>
                  </div>
                  <div class="modal-body">
                    <div data-error-panel></div>
                    <div class="alert alert-error" ng-show="error">
                      <button type="button" class="close" data-dismiss="alert">&times;</button>
                      <span ng-switch ng-switch-on="error.component"> 
                        <strong ng-switch-when="name-check"
                                th:text="#{A problem occured when trying to check your input}"></strong>
                        
                        <strong ng-switch-default th:text="#{A problem occured}"></strong>
                      </span> {{error.message}}
                    </div>
                    <form class="form-horizontal" novalidate data-ng-submit="save()" name="newRoundtripForm">
                      <fieldset>
                        <div class="control-group" ng-class="errorClass(newRoundtripForm.name)">
                          <label class="control-label" for="roundtrip-name" th:text="#{Name}">Name</label>
                          <div class="controls">
                            <input ng-model="newRoundtrip.name" id="roundtrip-name" name="name" type="text" class="input-xlarge" available="isNameAvailable" required autofocus />
                            <p class="help-block" ng-show="newRoundtripForm.name.$error.required" th:text="#{Enter the name of your roundtrip}"></p>
                            <p class="help-block" ng-show="newRoundtripForm.name.$error.available" th:text="#{The name is already used}"></p>
                          </div>
                        </div>
                      </fieldset>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button class="btn" ng-click="newRoundtripDialog.close()" th:text="#{Cancel}">Cancel</button>
                    <button id="saveRoundtripButton" class="btn btn-primary" data-ng-click="save()" ng-disabled="!isValid()" th:text="#{Save}" data-req-aware="newRoundtripForm">Save</button>
                  </div>
                </div>
              </modal-dialog>
              <!-- end create-roundtrip-dialog -->
              <!-- begin delete-roundtrip-dialog -->
              <modal-dialog model="deleteRoundtripDialog" ng-cloak>
                <div class="modal hide" data-ng-controller="DeleteRoundtripController" ngm-if="deleteRoundtripDialog.renderHtml()"> 
                  <div class="modal-header">
                    <button ng-show="deleteRoundtripDialog.autoClosable" type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 th:text="#{'Delete roundtrip'}"></h3>
                  </div>
                  <div class="modal-body" data-ng-switch data-on="toBeDeleted">
                    <div data-error-panel></div>
                    <div data-ng-switch-when="performRoundtripDeletion">
                      <p> 
                        <span th:text="#{'Are you sure you would like to delete the selected roundtrip?'}">
                          Are you sure you would like to delete the selected roundtrip?
                        </span>
                      </p>
                    </div>
                    <div data-ng-switch-when="deletionSuccess">
                      <p>
                        <span th:text="#{The deletion of the roundtrip was successful.}">
                          The deletion of the roundtrip was successful.
                        </span>
                      </p>
                    </div>
                    <div data-ng-switch-when="deletionFailed">
                      <p>
                        <span th:text="#{The deletion of the roundtrip failed.}">
                          The deletion of the roundtrips failed.
                        </span>
                      </p>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button class="btn"
                            data-ng-show="toBeDeleted == 'performRoundtripDeletion'"
                            data-ng-click="deleteRoundtripDialog.close()" th:text="#{'Cancel'}">Cancel</button>
                    <button class="btn btn-primary"
                            data-ng-show="toBeDeleted == 'deletionSuccess' || toBeDeleted == 'deletionFailed'" 
                            data-ng-click="deleteRoundtripDialog.close()" th:text="#{'Close'}">Close</button>
                    <button class="btn btn-primary"
                            data-ng-show="toBeDeleted == 'performRoundtripDeletion'" 
                            data-ng-click="performDeletion()" th:text="#{'Delete'}" data-req-aware>Delete</button>
                  </div>
                </div>
              </modal-dialog>  
              <!-- end delete-roundtrip-dialog -->
            </div>
          </div>
          <!-- actual view body is rendered here whenever the url changes -->
          <div data-ng-view class="span9">
          </div>
        </div>
      </div>
      <div class="push-down"><!-- // --></div> 
    </div>
    <footer th:substituteby="fragment/common :: footer" />
  </body>
</html>
