<div id="{{model.alias}}" class="nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
    <div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th/>
                    <th>
                        <localize key="content_documentType">Document Type</localize>
                    </th>
                    <th>
                        <localize key="editcontenttype_tab">Tab</localize>
                    </th>
                    <th>
                        <localize key="template_template">Template</localize>
                    </th>
                    <th />
                </tr>
            </thead>
            <tbody ui-sortable="sortableOptions" ng-model="model.value">
                <tr ng-repeat="config in model.value">
                    <td class="icon icon-navigation">
                    </td>
                    <td>
                        <select id="{{model.alias}}_doctype_select"
                            ng-options="dt.alias as dt.name for dt in model.docTypes | orderBy: 'name'"
                            ng-model="config.ncAlias" required></select>
                    </td>
                    <td>
                        <select id="{{model.alias}}_tab_select"
                            ng-options="t for t in docTypeTabs[config.ncAlias]"
                            ng-model="config.ncTabAlias" required></select>
                    </td>
                    <td>
                        <input type="text" ng-model="config.nameTemplate" />
                    </td>
                    <td>
                        <a class="btn btn-danger" ng-click="remove($index)" ng-show="model.value.length > 1">
                            <localize key="general_delete">Delete</localize>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <a class="btn" ng-click="add()">
                <localize key="general_add">Add</localize>
            </a>
            <i class="icon icon-help-alt medium nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
        </div>
    </div>
    <br/>
    <div class="nested-content__help-text" ng-show="showHelpText">
        <p>
            <b><localize key="editcontenttype_tab">Tab</localize>:</b><br/>
            Select the tab who's properties should be displayed. If left blank, the first tab on the doc type will be used.
        </p>
        <p>
            <b><localize key="template_template">Template</localize>:</b><br/>
            Enter an angular expression to evaluate against each item for its name. Use <code ng-non-bindable>{{$index}}</code> to display the item index  
        </p>
    </div>
</div>
