<div class="umb-editor umb-relatedlinks" ng-controller="Umbraco.PropertyEditors.RelatedLinksController">
    
    <table class="table table-striped">
        <thead>
            <tr>
                <td></td>
                <td><localize key="relatedlinks_caption">Caption</localize></td>
                <td><localize key="relatedlinks_link">Link</localize></td>
                <td><localize key="relatedlinks_newWindow">New window</localize></td>
                <td></td>
            </tr>
        </thead>
        <tbody ui-sortable="sortableOptions">
            <tr ng-repeat="link in model.value" data-link="{{link.link}}">
                <td style="width: 20px"><i class="icon icon-navigation handle"></i></td>
                <td style="word-wrap:break-word; word-break: break-all">
                    <span ng-show="!link.edit">{{link.caption}}</span>
                    <input type="text" ng-model="link.caption" ng-show="link.edit" />
                </td>
                <td style="word-wrap:break-word; word-break: break-all">
                    <div ng-show="!link.edit">
                        <a href="{{link.link}}" target="_blank" ng-show="!link.isInternal">{{link.link}}</a>
                            <a href="#/content/content/edit/{{link.internal}}" target="_blank" ng-show="link.isInternal" ng-bind="link.internalName">

                        </a>
                    </div>
                    <div ng-show="link.edit">
                        <div ng-show="!link.isInternal">
                            <input type="text" ng-model="link.link" /><br />
                            <localize key="or">or</localize> <a href="#" ng-click="switchLinkType($event,link)"><localize key="relatedlinks_chooseInternal">choose internal page</localize></a>
                        </div>

                        <div ng-show="link.isInternal">
                            <span ng-bind="link.internalName"></span> <a href="#" ng-click="selectInternal($event,link)"><localize key="choose">Choose</localize></a><br />
                            <localize key="or">or</localize> <a href="#" ng-click="switchLinkType($event,link)"><localize key="relatedlinks_enterExternal">enter external link</localize></a>
                        </div>
                    </div>
                </td>
                <td>
                    <span ng-show="!link.edit">{{link.newWindow}}</span>
                    <input type="checkbox" ng-model="link.newWindow" ng-show="link.edit" />
                </td>
                <td>

                    <div class="btn-group" ng-show="!link.edit">
                        <button type="button" class="btn btn-default" ng-click="edit($index)"><localize key="edit">Edit</localize></button>
                        <button type="button" class="btn btn-default" ng-click="delete($index)"><localize key="delete">Delete</localize></button>
                    </div>
                    <div class="btn-group" ng-show="link.edit">
                        <button type="button" class="btn btn-default" ng-click="saveEdit($index)"><localize key="buttons_save">Save</localize></button>
                    </div>

                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                    <td></td>
                    <td><input type="text" ng-model="newCaption" localize="placeholder" placeholder="@relatedlinks_captionPlaceholder"  val-highlight="hasError" /></td>
                    <td>
                        <div ng-show="addExternal">
                            <input type="text" ng-model="newLink" localize="placeholder" placeholder="@relatedlinks_externalLinkPlaceholder" />
                            <br /> <localize key="or">or</localize>
                            <a href="#" ng-click="switch($event)"><localize key="relatedlinks_chooseInternal">choose internal page</localize></a>
                        </div>

                        <div ng-show="!addExternal">
                            <span ng-bind="newInternalName"></span> <a href="#" ng-click="internal($event)"><localize key="choose">Choose</localize></a><br />
                            <localize key="or">or</localize> <a href="#" ng-click="switch($event)"><localize key="relatedlinks_enterExternal">enter external link</localize></a>
                        </div>
                    </td>
                    <td><input type="checkbox" ng-model="newNewWindow" /> </td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-default" ng-click="add($event)"><localize key="general_add">Add</localize></button>
                        </div>
                    </td>
            </tr>
        </tfoot>
    </table>
</div>