<div class="content-box shadow-z-1">
    <h3 class="text-primary">My link collection</h3>
    <div style="height: 500px" ng-if="!loggedIn()">
        <div class="alert alert-dismissible alert-warning">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <p>Sorry, you need to be logged in to view this page.</p>
        </div>
    </div>
    <div class="row" ng-if="loggedIn()">

        <div class="col-md-3">
            <ul class="nav nav-pills nav-stacked nav-primary">
                <li role="presentation" ng-class="{'active' : data.active == c._id}"
                    ng-repeat="c in data.collections | orderBy : 'name'" ng-mouseover="hover[c._id] = true"
                    ng-mouseleave="hover[c._id] = false">
                    <a href="javascript:void(0)" ng-click="setActiveCollection(c._id)" class="nowrap">
                        <span>{{c.name}}</span>
                        <div class="nowrap" style="float: right">
                            <i class="glyphicon glyphicon-trash" style="float:right" ng-if="hover[c._id]"
                                ng-click="deleteCollection(c._id); $event.stopPropagation();"></i>
                            <i class="glyphicon glyphicon-share" style="float:right; padding-right: 10px"
                                ng-if="hover[c._id] && !c.shared" ng-click="shareCollection(c._id); $event.stopPropagation();"></i>
                            <i class="glyphicon glyphicon-pencil" style="float:right; padding-right: 10px" ng-if="hover[c._id]"
                                data-target="#modalRename" data-toggle="modal" ng-click="data.editing = c; data.editing.newName = c.name"></i>
                        </div>
                    </a>
                </li>
                <li role="presentation">
                    <a href="javascript:void(0)" ng-click="toggleNewCollection()" ng-hide="adding"><i
                            class="glyphicon glyphicon-plus"></i> New</a>
                    <div class="form-group" style="margin: 0">
                        <input ng-if="adding" type="text" class="form-control" id="inputNewName"
                            ng-model="data.inputNewName" placeholder="Name" ng-blur="toggleNewCollection()"
                            my-enter="addCollection(data.inputNewName)">
                    </div>
                </li>
            </ul>
        </div>

        <div class="col-md-9">

            <div class="row m-0" ng-if="!data.active">
                <div class="alert alert-dismissible alert-success">
                    Sorry, you have no collections.
                </div>
            </div>
            <div class="row m-0" ng-if="data.active">

                <div class="form-group label-floating" style="margin-top: 15px;"
                    ng-if="getCollection(data.active).shared">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <i class="glyphicon glyphicon-share"></i>
                        </span>
                        <label class="control-label" for="shareUrl"><strong>Collection share URL:</strong></label>
                        <input type="text" id="shareUrl" class="form-control" readonly
                            value="{{getClientUrl()}}collection/{{data.active}}">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-fab btn-fab-mini " ngclipboard
                                data-clipboard-target="#shareUrl" ng-click="snackbar.show('Link copied to clipboard.')">
                                <i class="mdi-content-content-copy"></i>
                            </button>
                        </span>
                    </div>
                </div>

                <h4 class="text-primary">Add new link</h4>
                <form name="linkInputForm">
                    <div class="form-group">
                        <div class="input-group w-full">
                            <label for="collectionLinkInput" class="col-md-2 control-label">Link</label>
                            <div class="col-md-10" style="padding-right: 47px;">
                                <input type="url" name="linkInput" class="form-control" id="collectionLinkInput"
                                    placeholder="Paste a link here" ng-model="data.linkInput"
                                    ng-change="onLinkChanged()"
                                    my-enter="saveLink(data.active, data.linkInput, data.descriptionInput)"
                                    style="margin-top: -1px">
                            </div>
                            <span class="input-group-btn"></span>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: -20px">
                        <div class="input-group w-full">
                            <label for="descriptionInput" class="col-md-2 control-label">Description</label>
                            <div class="col-md-10" style="padding-left: 20px">
                                <input type="text" name="descriptionInput" class="form-control" id="descriptionInput"
                                    placeholder="{{ data.loading ? 'Loading ...' : 'Describe your link' }}" ng-model="data.descriptionInput"
                                    my-enter="saveLink(data.active, data.linkInput, data.descriptionInput)">
                            </div>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-fab btn-fab-mini btn-primary" id="saveButton"
                                    ng-disabled="!linkInputForm.linkInput.$valid || stringEmpty(data.linkInput) || data.loading"
                                    ng-click="saveLink(data.active, data.linkInput, data.descriptionInput)">
                                    <i
                                        ng-class="{'mdi-content-send' : !data.loading, 'mdi-notification-sync' : data.loading}"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>

            <div class="row m-0">
                <div class="row">
                    <div class="col-md-8">
                        <h4 class="text-primary flex items-center">
                            <span>{{getCollection(data.active).name}}</span>
                            <small class="badge bg-primary collection-counter">{{getCollection(data.active).size || getCollection(data.active).links.length}}</small>
                            <i title="Refresh" class="glyphicon glyphicon-repeat" style="margin-left: 10px; font-size: 14px; cursor: pointer" ng-click="setActiveCollection(data.active, data.currentPage, true)"></i>
                        </h4>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group search-form">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                                <input class="form-control" ng-model="data.search" ng-change="onSearchUpdated()" placeholder="Search ...">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-striped table-hover table-collection" ng-if="getCollection(data.active).links.length">
                    <thead>
                        <tr>
                            <th class="col-md-5">Link</th>
                            <th class="col-md-6">Description</th>
                            <th class="col-md-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="l in getCollection(data.active).links | orderBy:'-date'">
                            <td class="td-link-container">
                                <div>
                                    <a href="{{l.url}}" target="_blank">{{ l.url }}</a>
                                    <small ng-if="l.hits" class="badge bg-primary collection-counter" title="Link was clicked {{l.hits}} times">{{l.hits}}</small>
                                </div>
                                <div class="text-small">({{ l.date | date : 'MMM d, y h:mm a' }})</div>
                            </td>
                            <td>{{ l.description || '–'}}</td>
                            <td>
                                <a href="javascript:void(0)" ng-click="deleteLink(data.active, l._id)"
                                    class="btn btn-raised btn-danger btn-sm delete-button pull-right"><i
                                        class="glyphicon glyphicon-trash"></i></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="row placeholder-sketch" ng-if="!getCollection(data.active).links.length">
                <img src="images/undraw_no_data_qbuo.svg">
                <div class="flex items-center" style="margin-top: 20px">
                    <span style="margin: 0">This collection is empty</span>
                    <i title="Refresh" class="glyphicon glyphicon-repeat text-primary" style="margin-left: 10px; font-size: 14px; cursor: pointer" ng-click="setActiveCollection(data.active)"></i>
                </div>
            </div>

            <nav ng-if="getCollection(data.active).links.length">
                <ul class="pager">
                    <li class="previous" ng-class="{ disabled: data.currentPage == 1 }"><a href="javascript:void(0)" ng-click="movePage(-1)"><span aria-hidden="true">&larr;</span> Previous</a></li>
                    <span class="text-small">Page {{ data.currentPage }} / {{ data.numPages }}</span>
                    <li class="next" ng-class="{ disabled: data.currentPage == data.numPages }"><a href="javascript:void(0)" ng-click="movePage(+1)">Next <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
    </div>

    <div id="modalRename" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title text-primary">Rename Collection</h3>
            </div>
            <form name="renameForm" ng-submit="renameCollection(data.editing._id)">
            <div class="modal-body">
                  <div class="form-group">
                    <label for="inputName" class="col-md-2 control-label">New Name</label>
                    <div class="col-md-10">
                      <input type="text" name="name" class="form-control" id="inputName" ng-model="data.editing.newName" minlength="1" required autofocus>
                    </div>
                  </div>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-primary"
                  ng-disabled="!renameForm.name.$valid">Save</button>
              </div>
            </form>
        </div>
    </div>

</div>