<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false"

       ng-class="{'shrinky': startShrink, 'in-deck':flashcard.isInDeck()}">

    <div class="valign-wrapper">

      <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text">
        <!--<span ng-repeat="piece in flashcard.textPieces"-->
        <!--ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>-->

      </div>

    </div>
    <div class="card-overlay">

      <div class="top-box no-user-select" ng-hide="flashcard.isInDeck()"
           ng-click="flashcard.pull()">

        <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
      </div>

      <div class="top-box no-user-select" ng-show="flashcard.isInDeck()"
           ng-click="flashcard.unpull()">

        <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
      </div>

      <div class="bottom-box no-user-select">

        <div class="left-box">
          <div class="center-me"><i class="mdi-action-info-outline small"></i></div>

        </div>

        <div class="right-box" ng-click="flashcard.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-delay="50" 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>