<div class="toast-mystorage panel panel-defaults">
  <div class="panel-heading clearfix">
    <h4 class="panel-title pull-left" style="padding-left: 20px; padding-top: 15.0px;">{{Strings.MY_STORAGE}}</h4>
    <div class="btn-group pull-right">
      <button type="button" class="btn glyphicon glyphicon-trash grayscale trash"></button>
      <button type="button" class="btn close"><span class="icon_close"></button>
    </div>
  </div><!--// panel-heading -->
  
  <div class="panel-body">
      <div class="panel-group" role="tablist">
        <div class="tabpanel">
          <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active">
              <a href="#mystorage-bookmarks" aria-controls="mystorage-bookmarks" role="tab" data-toggle="tab">{{Strings.BOOKMARK}}</a>
            </li>
            <li role="presentation">
              <a href="#mystorage-memos" aria-controls="mystorage-memos" role="tab" data-toggle="tab">{{Strings.MEMO}}</a>
            </li>
          </ul><!--// tablist -->
          
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="mystorage-bookmarks">
              <div class="container">
                {{#bookmarks}}
                  <div class="row{{#thumbUrl}} has-thumb{{/thumbUrl}}" data-page="{{page}}">
                    {{#thumbUrl}}
                    <div class="col-md-3 col-sm-3 col-xs-3 image-col">
                      <img class="img-responsive" src="{{thumbUrl}}" width="{{thumbWidth}}px" height="{{thumbHeight}}px">
                    </div>
                    <div class="col-md-9 col-sm-9  col-xs-9 text-col">
                      <span class="label label-default">{{{displayPageNumber}}} {{Strings.PAGE}}</span>
                      <span>{{{text}}}</span>
                    </div>
                    {{/thumbUrl}}
                    {{^thumbUrl}}
                    <div class="col-md-12 text-col">
                      <span class="label label-default">{{{displayPageNumber}}} {{Strings.PAGE}}</span>
                      <span>{{{text}}}</span>
                    </div>
                    {{/thumbUrl}}
                  </div>
                  <hr>
                {{/bookmarks}}
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="mystorage-memos">
              <div class="container">
                {{#memos}}
                  <div class="row{{#thumbUrl}} has-thumb{{/thumbUrl}}" data-page="{{page}}">
                    {{#thumbUrl}}
                    <div class="col-md-3">
                      <img class="img-responsive" src="{{thumbUrl}}" width="{{thumbWidth}}px" height="{{thumbHeight}}px">
                    </div>
                    <div class="col-md-9 text-col">
                      <span class="label label-default">{{{displayPageNumber}}} {{Strings.PAGE}}</span>
                      <span>{{{text}}}</span>
                    </div>
                    {{/thumbUrl}}
                    {{^thumbUrl}}
                    <div class="col-md-12 text-col">
                      <span class="label label-default">{{{displayPageNumber}}} {{Strings.PAGE}}</span>
                      <span>{{{text}}}</span>
                    </div>
                    {{/thumbUrl}}
                  </div>
                  <hr>
                {{/memos}}
              </div>
            </div>
          </div><!--// tab-content -->
        </div><!--// tabpanel -->
      </div><!--// panel-group -->
  </div><!--// panel-body -->

</div>