<div class="card flashy black-text"
     ng-class="{'in-deck':flashcard.isInDeck()}">
  <div class="valign-wrapper">
    <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
  </div>
  <div class="card-overlay">
    <div class="top-box no-user-select"
         ng-click="flashcard.pullUnpull()">
      <div class="center-me">
        <i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i>
        <i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i>
      </div>
    </div>
    <div class="bottom-box no-user-select">
      <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info">
        <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
      </div>
      <div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide">
        <div class="center-me"><i class="mdi-action-delete small"></i></div>
      </div>

    </div>
  </div>
  <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
    <div class="center-me tooltipped" data-position="bottom" data-tooltip="In deck"><i
            class="mdi-action-done small"></i></div>
  </div>
  <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
    <span class="center-me">score:{{flashcard.score}}</span>
  </div>
</div>