<ion-view view-title="Measles">
  <ion-content class="padding-10" scroll="false">
    <div class="row" style="height:100%; width: 100%;" ng-show="sid==''">
      <div class="valign-wrapper empty-message">
        <div class="valign">
          <i class="icon ion-information-circled"></i>
          <br>
          Please select a silhouette
        </div>
      </div>
    </div>
    <div class="row" style="height:100%;">
      <div class="col col-10">
        <button class="button button-royal button-round" ng-repeat="group in categories"
                ng-click="measlesctrl.selectCategory(group)" ng-class="{ active: group.selected }">
          {{group.category_id}}
        </button>
        <button class="button button-energized  button-fab ink position-bottom" ng-click="measlesctrl.undo()"><i class="icon ion-reply"></i></button>
      </div>
      <div class="col col-90" style="height:100%;">
        <div class="row" style="height:100%;">
          <div class="col" style="height:100%;">
            <div style="height:100%;overflow:hidden;">
              <img id="front_image" height="100%" ng-src="data:image/svg+xml;base64,{{front}}" usemap="#front_map">
              <map name="front_map">
               </map>
            </div>
            <div id="dbg"></div>
          </div>
          <div class="col" style="height:100%;">
            <div style="height:100%;overflow:hidden;">
              <img id="back_image" height="100%" ng-src="data:image/svg+xml;base64,{{back}}" usemap="#back_map">
              <map name="back_map">
              </map>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="button button-positive button-fab ink button-fab-bottom-right" ng-click="measlesctrl.save()">Done</button>
  </ion-content>
</ion-view>
