<div class="modal-header bootstrap-wrapper">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title" ng-if="!loading">{{(editItem != null ? 'Edit element' : 'Create element') | translate}}{{editItem != null ? (': ' + editItem.heading) : ''}}</h1>
</div>
<div class="modal-body bootstrap-wrapper">
    <h1 class="content-header-1" style="margin-bottom: 20px;" ng-show="mode == 'firstScene'">{{'Choose channels' | translate}}</h1>
    <div ng-show="mode == 'loading'" class="container-fluid">
        <div class="row">
            <div class="col-sm-12">{{'loading' | translate}}</div>
        </div>
    </div>
    <div class="container-fluid" ng-show="mode == 'firstScene'">
        <div class="row">
            <div class="col-sm-12">
                <ul class="nav nav-tabs">
                    <li role="presentation" ng-repeat="contenttype in contenttypescache" ng-class="{ active: isActiveContentType(contenttype)}">
                        <a href="" ng-click="changeSelectedContentType(contenttype)">
                            {{contenttype.name | translate}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <label class="channel-tree-header">
                    {{'Select' | translate}}
                    <a class="pull-right expand-collapse" ng-click="showHideChannels()">{{showAllChannelsText}}</a>
                </label>
                <hr />
                <div ng-show="channelsTree.length > 0">
                    <ul class="channel-tree">
                        <li ng-repeat="channel in channelsTree" wizdom-include="::'channelTree'"></li>
                    </ul>
                </div>
                <div ng-show="channelsTree.length == 0">
                    <div class="alert alert-warning" role="alert">{{'Channels were filtered out by user choice. To see all available channels click the button above' | translate}}</div>
                </div>
            </div>
        </div>

        <script type="text/ng-template" id="channelTree">
            <div class="channelItem">
                <input type="checkbox" checklist-model="selectedchannels" checklist-value="channel.id" ng-disabled="!channel.enabled">
                <span class="channelItem-common">
                    <span class="pointer" ng-class="channel.folderClass" ng-click="toggleChildren(channel)"></span>
                    <span class="item-text" ng-click="selectItem(channel);" style="cursor:pointer">{{::channel.name}}</span>
                    <a style="cursor:pointer" ng-show="channel.childs.length > 0" ng-click="selectParentChannel(channel, null)">{{::(channel.expandAll ? 'None' : 'All') | translate}}</a>
                </span>
                <hr />
            </div>
            <ul ng-if="channel.childs && channel.childrenVisible">
                <li ng-repeat="channel in channel.childs" wizdom-include="'channelTree'"></li>
            </ul>
        </script>
    </div>
    <div class="container-fluid" ng-show="mode == 'secondScene'">
        <div class="row col-md-12" style="overflow-y:auto;" id="secondpan">
            <div wizdom-include="templateUrl"></div>
        </div>
    </div>

    <div ng-show="mode == 'nodata'">
        <div class="alert alert-warning" role="alert">{{'To create elements you need to have at least one channel and related content type' | translate}}</div>
    </div>
</div>
<div class="modal-footer bootstrap-wrapper" ng-show="mode == 'firstScene' || mode == 'secondScene'">
    <!--<span ng-show="mode == 'secondScene'" class="pull-left" style="line-height: 2.5em;">{{channelOverview}}</span>-->
    <!-- <button type="button" class="btn btn-default" ng-click="cancel()">{{'Cancel' | translate}}</button>-->
    <button type="button" ng-show="mode == 'secondScene'" class="btn btn-default wiz-btn-padding" ng-click="back()">{{'Back' | translate}}</button>
    <button type="submit" ng-if="editItem != null" ng-show="mode == 'firstScene' || mode == 'secondScene'" class="btn btn-default wiz-btn-padding" ng-click="deleteNewsItem(editItem.id)">{{'Delete' | translate}}</button>
    <button type="submit" ng-show="mode == 'secondScene'" class="btn btn-success wiz-btn-padding" ng-click="save()" ng-disabled="form.$invalid">{{'Save' | translate}}</button>
    <button type="submit" ng-show="mode == 'firstScene'" class="btn btn-primary wiz-btn-padding" ng-click="next();" ng-disabled="selectedchannels.length == 0">{{'Next' | translate}}</button>
</div>