<ng-switch on="markTextFormIsVisible">
  <!-- Use ng-switch to create a new scope each time it is closed. --> 
  <form ng-controller="MarkTextCtrl" class="panel" ng-switch-when="true">
    <h3>Mark text</h3>
    
    <div class="row">
      <div class="three mobile-one columns">
        <button type="button" class="secondary button"
                ng-click="hideMarkTextForm()">
          <i class="icon-remove"></i>
          <span>
            <span class="hide-for-small">Close</span>
          </span>
        </button> 
      </div>
      
      <div class="six mobile-two columns">
        <div class="row collapse">
          <div class="six mobile-three columns">
            <span class="prefix">Type (0-255):</span>
          </div>
          <div class="six mobile-one columns">
            <input type="number" name="markType" ng-model="markType" jskom-autofocus />
          </div>
        </div>
      </div>
      
      <div class="three mobile-one columns">
        <button type="submit" class="success button jskomRight"
                ng-disabled="isMarking" ng-click="markText()">
          <i class="icon-ok"></i>
          <span>
            <span class="hide-for-small">Mark</span>
          </span>
        </button>
      </div>
    </div>
  </form>
</ng-switch>

<div class="row" ng-cloak>
  <div class="three mobile-one columns">
    <button type="button" class="secondary button" ng-click="writeComment()"
            ng-show="text">
      <i class="icon-pencil"></i>
      <span>
        <!-- Must nest hide-for-small in span because of "display: inherit" -->
        <span class="hide-for-small">Comment</span>
      </span>
    </button>
  </div>
  
  <div class="three mobile-one columns">
    <jskom:dropdown-toggle class="secondary dropdown button up" ng-show="text">
      <i class="icon-bolt"></i>
      <span>
        <span class="hide-for-small">Actions</span>
      </span>
      
      <ul class="dropdown-menu">
        <li>
          <button ng-click="showMarkTextForm()" ng-disabled="markTextFormIsVisible">
            Mark text...
          </button>
        </li>
        <li ng-controller="UnmarkTextCtrl">
          <button ng-click="unmarkText()" ng-disabled="isUnmarking">
            Unmark text
          </button>
        </li>
        
        <li class="divider"></li>
        <li>
          <button ng-click="markAsRead()"
                  ng-disabled="readmarkIsLoading || !(text.text_no|isUnread:membership)">
            Mark as read
          </button>
        </li>
        <li>
          <button ng-click="markAsUnread()"
                  ng-disabled="readmarkIsLoading || text.text_no|isUnread:membership">
            Mark as unread
          </button>
        </li>
        
        <li class="divider" ng-hide="showCommented == null && showAllComments == null"></li>
        <li ng-hide="showCommented == null">
          <button ng-click="showCommented()" >Show commented</button>
        </li>
        <li ng-hide="showAllComments == null">
          <button ng-click="showAllComments()">
            Show all comments
          </button>
        </li>
      </ul>
    </jskom:dropdown-toggle>
  </div>
  
  <div class="three mobile-one columns">
  </div>
  
  <div class="three mobile-one columns">
    <button type="submit" class="button right"
            ng-show="reader"
            ng-click="readNext()" ng-disabled="!canReadNext()">
      <i class="icon-arrow-right"></i>
      <span>
        <!-- Must nest hide-for-small in span because of "display: inherit" -->
        <span class="hide-for-small">
          Next <span ng-show="reader.hasPending()">({{ reader.pendingCount() }})</span>
        </span>
      </span>
    </button>
  </div>
  
</div>


