<div ng-controller="Fabric.FabricViewController">

  <div class="row-fluid fabric-view gridStyle">

    <div class="columns">

      <!-- containers -->
      <div id="center" class="column">
        <div class="section-header">

          <div class="selection-controls">
            <i class="icon-circle-blank clickable" title="Clear Selection" ng-click="setActiveContainer(null)"></i>
            <i class="icon-circle clickable" title="Select All" ng-click="selectAllContainers()"></i>
          </div>

          <div class="section-title">
            Containers
          </div>

          <div class="section-controls">
            <i class="icon-plus clickable" title="Create Container" ng-click="createContainer()"></i>
            <i class="icon-minus clickable" title="Delete Container" ng-click="deleteSelectedContainers()" ng-show="selectedContainers.length != 0"></i>
            <i class="icon-play-circle clickable" title="Start Containers" ng-click="startSelectedContainers()" ng-show="anySelectionAlive(false)"></i>
            <i class="icon-off clickable" title="Stop Containers" ng-click="stopSelectedContainers()" ng-show="anySelectionAlive(true)"></i>

          </div>

          <div class="section-filter">
            <input type="text" class="search-query" placeholder="Filter..." ng-model="containerIdFilter">
            <i class="icon-remove clickable" title="Clear Filter" ng-click="containerIdFilter = ''"></i>
          </div>
        </div>

        <div class="container-section">

          <div class="canvas">
            <div fabric-container-list></div>
          </div>
        </div>
      </div>


      <!-- versions and profiles -->
      <div id="left" class="column">
        <div class="section-header">

          <div class="selection-controls">

          </div>

          <div class="section-title">
            Versions
          </div>

          <div class="section-controls">

            <i class="icon-dropbox clickable" title="Apply patch to Version" ng-show="activeVersionId && activeVersionId != ''" ng-click="patchVersion(activeVersionId)" title="Upload and apply patches to the selected version"></i>

            <i class="icon-plus clickable" title="Create new Version" ng-click="createVersionDialog.open()"></i>

            <!--
            <a ng-href="#/wiki/branch/{{version.id}}/view/" ng-show="hasFabricWiki()"
               title="View, edit or create configuration files for the profiles in this version">
               <i class="icon-edit"></i>
             </a>-->



            <i class="icon-minus clickable" title="Delete this Version" ng-click="deleteVersionDialog.open()" ng-show="activeVersionId && activeVersionId != '' && versionCanBeDeleted()"></i>

            <i class="icon-chevron-sign-right clickable green" title="Apply to selected containers" ng-click="applyVersionToContainers()" ng-show="showMigrateButton()"></i>


           </div>
         </div>
         <div class="version-section">
           <div fabric-version-selector='activeVersion'></div>
        </div>


        <div id="profile-section" class="section-header" ng-show="activeVersionId && activeVersionId !== ''">
          <div class="selection-controls">
            <i ng-show="profileNoneSelected" class="icon-circle-blank clickable" title="Select All" ng-click="profileSelectAll()"></i>
            <i ng-show="profileSomeSelected" class="icon-adjust clickable" title="Clear Selection" ng-click="profileSelectNone()"></i>
            <i ng-show="profileAllSelected" class="icon-circle clickable" title="Clear Selection" ng-click="profileSelectNone()"></i>

          </div>

          <div class="section-title">
            Profiles
          </div>
          <div class="section-controls">

            <i class="icon-plus clickable" title="Create new Profile" ng-click="createProfileDialog.open()"></i>
            <!--
            <a ng-href="#/wiki/branch/{{version.id}}/view/{{selected[0].id}}" class="btn" ng-disabled="selected.length == 0" ng-show="hasFabricWiki()"
               title="View, edit or create configuration files for the profiles in this version"><i class="icon-edit"></i>
             </a>-->
            <i class="icon-minus clickable" title="Delete selected Profiles" ng-click="deleteProfileDialog.open()" ng-show="selectedProfiles.length > 0 && profilesCanBeDeleted()"></i>
            <i class="icon-chevron-sign-right clickable green" title="Apply to selected containers" ng-click="addProfilesToContainers()" ng-show="showProfileAddButton()"></i>

           </div>
           <div class="section-filter">
            <input type="text" class="search-query" placeholder="Filter..." ng-model="profileIdFilter">
            <i class="icon-remove clickable" title="Clear Filter" ng-click="profileIdFilter = ''"></i>
          </div>
        </div>
        <div class="profile-section" hawtio-viewport="#profile-section" containing-div="#left" height-adjust="-12">
          <div class="canvas">
            <div fabric-profile-selector='selectedProfiles'
                 version-id='activeVersion.id'
                 show-links="true"
                 clear-on-version-change="true"
                 filter-watch="profileIdFilter"
                 show-header="false"
                 use-circles="true"></div>
          </div>
        </div>
      </div>


      <!-- active profiles -->
      <div id="right" class="column">
        <div class="section-header">
          <div class="selection-controls">
            <i class="icon-circle-blank clickable" title="Clear Selection" ng-click="setActiveProfile(null)"></i>
          </div>
          <div class="section-title">
            Active Profiles
          </div>
          <div class="section-controls">

           <i class="icon-minus clickable" title="Delete selected active profiles" ng-click="removeActiveProfiles()" ng-show="selectedActiveProfiles.length > 0 && selectedContainers.length > 0"></i>

          </div>
          <div class="section-filter">
            <input type="text" class="search-query" placeholder="Filter..." ng-model="activeProfileIdFilter">
            <i class="icon-remove clickable" title="Clear Filter" ng-click="activeProfileIdFilter = ''"></i>
          </div>
        </div>
        <div class="canvas">
          <div ng-repeat="profile in activeProfiles" ng-show="filterActiveProfile(profile)">
            <div class="box" ng-class="getSelectedClass(profile)">

              <div class="box-left">

                <i class="icon-circle-blank clickable" ng-show="!profile.selected" title="Not Selected" ng-click="profile.selected = true"></i>
                <i ng-show="profile.selected" class="icon-circle clickable" title="Selected" ng-click="profile.selected = false"></i>

                <div class="profile-select" title="{{profile.versionId}} / {{profile.id}} ({{profile.count}})" ng-click="setActiveProfile(profile)">
                  {{profile.versionId}} / {{profile.id}} ({{profile.count}})
                </div>
              </div>

              <div class="box-right">
                <i class="clickable icon-info-sign" title="Show Details" ng-click="showProfile(profile)"></i>
              </div>

            </div>    
          </div>
        </div>
      </div>


    </div>
  </div>

  <!-- dialogs -->
  <!--
  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
  -->

  <div hawtio-confirm-dialog="deleteVersionDialog.show" ok-button-text="Yes" cancel-button-text="No" on-ok="deleteVersion()">
    <div class="dialog-body">
      <p>Delete version {{activeVersionId}}?</p>
    </div>
  </div>

  <div hawtio-confirm-dialog="deleteProfileDialog.show" ok-button-text="Yes" cancel-button-text="No" on-ok="deleteSelectedProfiles()">
    <div class="dialog-body">
      <p>Are you sure you want to delete the profiles {{getSelectedProfileIds().join(", ")}}</p>
    </div>
  </div>

  <div modal="createProfileDialog.show">
    <form name="createProfile" class="form-horizontal no-bottom-margin" ng-submit="doCreateProfile(newProfileName, selectedParents)">
      <div class="modal-header"><h4>Create new Profile in Version {{activeVersionId}}</h4></div>
      <div class="modal-body">
        <label>Profile Name: </label>
        <input name="id" class="input-xlarge" type="text" ng-model="newProfileName" required ng-pattern="/^[a-zA-Z0-9_-]*$/">
        <span class="help-block" ng-show="createProfile.id.$error.required">Please enter a name for this profile</span>
        <span class="help-block" ng-show="createProfile.id.$error.pattern">Name can only contain letters, numbers, '-', and '_'</span>

        <p></p>
        <label>Select one or more parent profiles as needed: </label>
        <div fabric-profile-selector="selectedParents" version-id="activeVersionId"></div>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="!createProfile.$valid" type="submit" value="Create">
        <input class="btn btn-primary" ng-click="createProfileDialog.close()" value="Cancel">
      </div>
    </form>
  </div>

  <div ng-include="'app/fabric/html/changeVersionDialog.html'"></div>
</div>
