<div class="ui segment js-tags">
    <div class="ui container" ng-show="!editMode">
        <div class="ui grid">
            <div class="two wide column  js-tag-label" ng-if="tag.cnt" ng-repeat="tag in tags">
                <div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
                    {{ tag.name }}
                    ({{ tag.cnt || 0 }})
                </div>
            </div>
        </div>
    </div>
    <div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
        <p>提示：拖拽分类即可进行排序</p>
        <div class="ui six stackable cards" sv-root sv-part="tags">
            <div class="card" ng-repeat="tag in tags" id="tag{{tag.id}}" sv-element>
                <div class="content">
                    <div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
                    <div class="ui large fluid transparent input" style="height:19px;" ng-if="tag.edit">
                        <input type="text" ng-model="tag.name" style="font-size:18px;" id="tagedit{{tag.id}}">
                        <i class="checkmark icon" style="cursor:pointer;" ng-click="updateTag(tag)" title="更新分类"></i>
                        <i class="mail forward icon" style="cursor:pointer;" ng-click="backTag(tag)" title="放弃更新"></i>
                    </div>
                </div>
                <div class="content" style="cursor: move" sv-handle>
                    <div class="description">
                        <p>书签：{{ tag.cnt || 0 }}个</p>
                        <p>{{ tag.last_use }}</p>
                    </div>
                </div>
                <div class="extra content">
                    <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/delete.png" ng-click="delTag(tag)" title="删除分类">
                    <label for="tagedit{{tag.id}}" ng-show="!tag.edit">
                        <img class="ui mini spaced image right floated" style="width:16px;height:16px;margin:0 5px" ng-src="./images/edit-bookmark.png" ng-click="editTag(tag)" title="编辑分类">
                    </label>
                </div>
            </div>
            <div class="card" style="background-color:#F5F5F5;" ng-click="showAddTag()">
                <div class="image">
                    <img src="./images/add-tag.png">
                </div>
            </div>
        </div>
    </div>
    <div style="width:22px;height:22px;" class="js-edit" ng-click="toggleMode()" title="{{editMode ? '退出编辑模式' : '点我进入编辑模式'}}">
        <img class="ui ui middle aligned tiny image" ng-src="./images/{{ editMode ? 'back' : 'edit'}}.png" ng-show="!loadTags">
    </div>
</div>
<div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}">
    正在加载中...
</div>
<table class="ui selectable sortable celled table js-tags-table" ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks && !editMode">
    <thead>
        <tr>
            <th class="forbid_sorted">标题</th>
            <th class="forbid_sorted">链接</th>
            <th style="width:90px;" ng-class="{descending: order[0], sorted:order[0]}" ng-click="changeOrder(0)" title="点击可对表格进行排序">点击次数</th>
            <th style="width:100px;" ng-class="{descending: order[1], sorted:order[1]}" ng-click="changeOrder(1)" title="点击可对表格进行排序">创建日期</th>
            <th style="width:100px;" ng-class="{descending: order[2], sorted:order[2]}" ng-click="changeOrder(2)" title="点击可对表格进行排序">最后点击</th>
            <th style="width:150px;" class="forbid_sorted">分类</th>
            <th style="width:88px;" class="forbid_sorted">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
            <td>
                <img class="ui ui middle aligned tiny image" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" favicon-err="./images/favicon/{{bookmark.id}}.ico">
                <span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;">
                    {{ bookmark.title }}
                </span>
            </td>
            <td>
                <span title="{{bookmark.url}} 点击复制链接" ng-click="copy(bookmark.id, bookmark.url)" id="tagurl{{bookmark.id}}" style="cursor:default;">{{ bookmark.url }}</span>
            </td>
            <td>{{ bookmark.click_count }}</td>
            <td>
                <span title="{{bookmark.created_at}}" class="need_to_be_rendered" data-timeago="{{bookmark.created_at}}"></span>
            </td>
            <td>
                <span id="time{{bookmark.id}}" title="{{bookmark.last_click}}" class="need_to_be_rendered" data-timeago="{{bookmark.last_click}}"></span>
            </td>
            <td>
                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="getBookmarks(tag.id, 1)">
                    {{ tag.name }}
                </div>
            </td>
            <td>
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情">
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="7">
                <pagination></pagination>
            </th>
        </tr>
    </tfoot>
</table>
