<div class="subnav">
    <div class="button-stack left-stack" >
        <a class="navbtn homebtn" href="/#/liveblog">
            <i class="icon-th-large"></i>
        </a>
    </div>
    <h3 class="page-nav-title"><a href="/#/liveblog/edit/{{ settings.blog._id }}?panel=editor" title="{{ 'Back to blog authoring' | translate }} ">{{ settings.blog.title }}</a></h3>
    <div class="button-stack right-stack active settings-disabled">
        <span class="navbtn">
            <i class="big-icon--analytics"></i>
        </span>
        <span class="navbtn  navbtn-active">
            <i class="big-icon--cog"></i>
        </span>
    </div>
</div>

<div class="blog-settings-view">
    <div class="settings-page">
        <div class="subnav">
            <h3 class="page-nav-title">Settings</h3>
            <button ng-click="settings.saveAndClose()" class="btn btn--primary pull-right" type="button" translate ng-disabled="!(settings.forms.dirty || settings.forms[settings.tab].$dirty)">Done</button>
            <button ng-click="settings.save()"  class="btn btn--primary pull-right" type="button" translate ng-disabled="!(settings.forms.dirty || settings.forms[settings.tab].$dirty)">Save</button>
            <button ng-click="settings.close()" class="btn btn-default pull-right" type="button" translate>Cancel</button>
        </div>
        <div class="tabbable outer">
            <ul class="nav-tabs nav-stacked">
                <li ng-class="{active: (settings.tab === 'general')}">
                    <a ng-href="" ng-click="settings.changeTab('general')" translate>General</a>
                </li>
                <li ng-class="{active: (settings.tab === 'team')}" data="blog-settings-team">
                    <a ng-href="" ng-click="settings.changeTab('team')" translate>Team</a>
                </li>
                <li ng-class="{active: (settings.tab === 'outputs')}" data="blog-settings-outputs">
                    <a ng-href="" ng-click="settings.changeTab('outputs')" translate>Output Channels</a>
                </li>
                <li ng-class="{active: (settings.tab === 'consumers')}" data="blog-settings-consumers">
                    <a ng-href="" ng-click="settings.changeTab('consumers')" translate>Consumers</a>
                </li>
            </ul>
            <div>
                <!-- GENERAL -->
                <div class="split-content tab-content outer" ng-if="(settings.tab === 'general')">
                    <div class="header">
                        <h2 translate>General</h2>
                    </div>
                    <div class="content">
                        <form class="form-horizontal" name="settings.forms.general">
                            <div class="form-group">
                                    <label class="control-label" translate>Blog ID</label>

                                    <div class="form-input relative">
                                        <p>{{ settings.blog._id }}</p>
                                    </div>
                                </div>
                            <div class="form-group">
                                <label for="inputTitle" class="control-label" translate>Blog Status</label>
                                <p ng-if="settings.deactivateStatus">Too many active blogs</p>
                                <div class="form-input relative" ng-if="!settings.deactivateStatus">
                                    <span class="blog-status">{{ settings.blog_switch ? 'Active' : 'Archived' | translate }}</span>
                                    <span style="display: block" sd-tooltip="{{ settings.blog_switch ? 'Archive Blog' : 'Activate Blog' | translate }}" data-flow="right">
                                        <span class="pull-left" sd-switch ng-model="settings.blog_switch" data-blog-status-switch></span>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputTitle" class="control-label" translate>Blog Title</label>
                                <div class="form-input">
                                    <input
                                        name="inputTitle"
                                        ng-model="settings.newBlog.title"
                                        class="form-control"
                                    />
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputImage" class="control-label" translate>Blog Image</label>
                                <div class="form-input form-image">
                                    <figure class="blog-media" ng-show="settings.newBlog.picture_url">
                                        <img ng-src="{{settings.newBlog.picture_url}}"/>
                                        <div class="blog-image-actions">
                                            <button class="btn btn--primary pull-right" ng-click="settings.openUploadModal()" translate>Change</button>
                                            <button class="btn btn-default pull-right" ng-click="settings.removeImage()" translate>Remove</button>
                                        </div>
                                    </figure>
                                    <div ng-hide="settings.newBlog.picture_url">
                                        <button class="btn btn--primary pull-left" ng-click="settings.openUploadModal()" translate>Upload Image</button>
                                        <div class="image-text pull-left" translate>Image has not been set so far</div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputDescription" class="control-label" translate>Blog Description</label>
                                <div class="form-input">
                                    <div class="form-box"
                                            sd-text-editor
                                            contenteditable="true"
                                            data-config="{toolbar: {buttons: ['bold', 'italic', 'underline', 'strikethrough', 'orderedlist', 'unorderedlist'],sticky: false,static: true,align: 'left',updateOnEmptySelection: true}}"
                                            data-language="en"
                                            ng-model="settings.newBlog.description"
                                    ></div>
                               </div>
                            </div>

                            <div class="form-group" style="display: none;">
                                <label for="inputLanguage" class="control-label" translate>Language</label>
                                <div class="form-input">
                                    <select
                                      ng-model="settings.blogPreferences.language"
                                      ng-options="language.language_code as language.name for language in settings.availableLanguages"
                                      class="form-control">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputTheme" class="control-label" translate>Theme</label>
                                <div class="form-input">
                                    <select
                                      ng-disabled="!settings.isThemeSelectorEnabled"
                                      ng-model="settings.selectedTheme"
                                      ng-change="settings.blogPreferences.theme = settings.selectedTheme.name"
                                      ng-options="theme as theme.label for theme in settings.availableThemes track by theme.name"
                                      class="form-control">
                                    </select>
                                <p ng-if="settings.selectedTheme.name == 'amp'" class="warn-block"> Be aware that the Liveblog 3 AMP theme does not yet support all Live Blog features and post types.</p>
                                </div>
                            </div>
                            <div class="form-group" ng-if="settings.embedMultiHight && !settings.selectedTheme.settings.renderForESI">
                                <label for="inputTitle" class="control-label" translate>Embed height</label>
                                <div class="form-input relative">
                                    <span class="blog-status">
                                        {{ settings.blogPreferences.embed_height_responsive_default ? 'Responsive' : 'Normal' | translate }}
                                    </span>
                                    <span style="display: block" sd-tooltip="{{ settings.blogPreferences.embed_height_responsive_default ? 'Fluid height' : 'Normal, fixed height' | translate }}" data-flow="right">
                                        <span class="pull-left" sd-switch ng-model="settings.blogPreferences.embed_height_responsive_default" data-embed-status-switch></span>
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputEmbedCode" class="control-label" translate>Embed code</label>
                                <div class="form-input">
                                    <textarea ng-if="!settings.selectedTheme.settings.renderForESI"
                                              class="form-control"
                                              rows="6"
                                              readonly="readonly"
                                              select-text-on-click>{{ settings.blogPreferences.embed_height_responsive_default ? settings.embeds.resizeing : settings.embeds.normal }}</textarea>
                                    <a href="{{ settings.publicUrl }}" target="_blank"><span ng-bind="settings.publicUrl"></span> <i class="icon-external"></i></a>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputStylesheet" class="control-label" translate>Stylesheet</label>
                                <div class="form-input">
                                    <a ng-if="settings.selectedTheme.settings.removeStylesESI"
                                       href="{{ settings.styleUrl }}"
                                       target="_blank">
                                          <span ng-bind="settings.styleUrl"></span> <i class="icon-external"></i>
                                    </a>
                                </div>
                            </div>

                            <div lb-syndication-switch></div>

                            <div
                                lb-marketplace-switch
                                market-enabled="settings.market_enabled"></div>

                            <div class="form-group">
                                <label for="category" class="control-label" translate>Category</label>
                                <div class="form-input">
                                    <select
                                      ng-model="settings.category"
                                      ng-options="category as category for category in settings.availableCategories"
                                      class="form-control">
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label" for="canCommentSelect" translate>Users Can Comment</label>
                                <div class="form-input">
                                    <select id="canCommentSelect"
                                        ng-model="settings.newBlog.users_can_comment"
                                        ng-options="option.value as option.text for option in settings.canCommentOptions"
                                        class="form-control">
                                    </select>
                                    <span class="form-input__hint" translate>
                                        This will override the theme level setting
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label
                                    for="start_date"
                                    class="control-label"
                                    translate>Coverage start</label>
                                <div
                                    sd-datepicker
                                    ng-model="settings.start_date"
                                    class="form-input"></div>
                            </div>

                            <div class="form-group">
                                <label
                                    for="start_time"
                                    class="control-label"
                                    translate>Coverate start time</label>
                                <div
                                    sd-timepicker
                                    ng-model="settings.start_time"
                                    class="form-input"></div>
                            </div>

                            <div class="form-group">
                                <label
                                    for="end_date"
                                    class="control-label"
                                    translate>Coverage end</label>
                                <div
                                    sd-datepicker
                                    ng-model="settings.end_date"
                                    class="form-input"></div>
                            </div>

                            <div class="form-group">
                                <label
                                    for="end_time"
                                    class="control-label"
                                    translate>Coverage end time</label>
                                <div
                                    sd-timepicker
                                    ng-model="settings.end_time"
                                    class="form-input"></div>
                            </div>

                            <div class="form-group">
                                <label for="main_page_url" class="control-label" translate>Main Page Url</label>
                                <div class="form-input">
                                    <input
                                        name="main_page_url"
                                        ng-model="settings.newBlog.main_page_url"
                                        class="form-control"
                                    />
                                    <span class="form-input__hint" translate>
                                        Used as mainEntityOfPage url for LiveBlogPosting schema. More info <a href="https://schema.org/LiveBlogPosting" target="_blank">here</a>.
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="blog_author" class="control-label" translate>Blog Author</label>
                                <div class="form-input">
                                    <input
                                        name="blog_author"
                                        ng-model="settings.newBlog.blog_author"
                                        class="form-control"
                                    />
                                    <span class="form-input__hint" translate>
                                        Used as author for LiveBlogPosting schema. More info <a href="https://schema.org/author" target="_blank">here</a>.
                                    </span>
                                </div>
                            </div>

                            <div class="form-group" ng-if="isAdmin()">
                                <label for="inputPostslimit" class="control-label" translate>Posts limit</label>
                                <div class="form-input">
                                    <select
                                      ng-model="settings.newBlog.posts_limit"
                                      ng-options="limit.value as limit.text for limit in settings.availablePostlimit"
                                      class="form-control">
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="removeBlog" class="control-label" translate>Blog removal</label>
                                <div class="form-input">
                                    <button
                                        ng-click="settings.askRemoveBlog()"
                                        lb-synd-rm-blog
                                        class="btn btn-default pull-left"
                                        type="button"
                                        translate>Remove blog</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Users -->
                <div class="split-content tab-content outer" ng-if="(settings.tab === 'team')">
                    <div class="header">
                        <h2 translate>Team</h2>
                    </div>
                     <div class="content">
                        <div class="settings-subsection">
                            <div class="subsettings-header">
                                <h3 translate class="inline-block">Owner</h3>
                                <a ng-click="settings.openOwner = true" class="open-modal" data-button="CHANGE OWNER" translate>CHANGE OWNER</a>
                            </div>
                            <div class="dropdown-content" ng-show="settings.openOwner" ng-click="$event.stopPropagation();">
                                <div class="user-select">
                                    <div>
                                        <form>
                                            <label for="assignee-search" translate>Choose new owner</label>
                                            <input type="text" name="assignee-search" ng-model="settings.search">
                                        </form>
                                        <div class="search-result">
                                            <ul class="users-list-embed">
                                                <a>Team</a>
                                                <li ng-repeat="member in settings.members track by member._id" ng-click="settings.temp_selected_owner = member" ng-class="{'active': settings.temp_selected_owner._id === member._id}">
                                                    <figure class="avatar small"><img sd-user-avatar data-user="member" alt="{{member.display_name || member.username }}"></figure>
                                                    <div class="name">{{member.display_name}}</div>
                                                </li>
                                                <a>Users</a>
                                                <li ng-repeat="user in settings.avUsers | filter:settings.search | filter:settings.userNotInMembers | orderBy: 'display_name'" ng-click="settings.temp_selected_owner = user" ng-class="{'active': settings.temp_selected_owner._id === user._id}">
                                                    <figure class="avatar small"><img sd-user-avatar data-user="user" alt="{{user.display_name || user.username }}"></figure>
                                                    <div class="name">{{user.display_name}}</div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="footer">
                                    <span class="clear pull-left" ng-click="settings.search = null" ng-show="settings.search" translate>Clear</span>
                                    <button class="btn btn--primary pull-right" ng-click="settings.buildOwner(settings.temp_selected_owner._id); settings.openOwner = false; $event.stopPropagation(); settings.forms.team.$setDirty();" ng-disabled="!settings.temp_selected_owner" translate>Select</button>
                                    <button class="btn pull-right" ng-click="settings.openOwner = false;  $event.stopPropagation();" translate>Cancel</button>
                                </div>
                            </div>
                            <form class="form-horizontal" name="settings.forms.team">
                                <div class="subsettings-content">
                                    <div class="inline-content first-block">
                                        <div class="inline-content padded-right">
                                            <div class="form-input profile-pic">
                                                 <figure class="avatar large">
                                                    <img sd-user-avatar data-user="settings.original_creator" alt="{{settings.original_creator.display_name || settings.original_creator.username }}">
                                                </figure>
                                            </div>
                                        </div>
                                        <div class="inline-content">
                                            <div style="margin-top: 25px;">
                                                <div class="form-input" data="original-creator-display-name">
                                                    <strong>{{ settings.original_creator.display_name }}</strong>
                                                </div>
                                                <div class="form-input" data="original-creator-username">
                                                    {{ settings.original_creator.username }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="subsettings-header header-top">
                                <h3 class="inline-block" translate>Team members</h3>
                                <a ng-click="settings.editTeam()" class="open-modal" data-button="EDIT TEAM" translate>EDIT</a>
                            </div>
                            <div class="subsettings-content">
                                <div ng-if="settings.members.length === 0 && settings.memberRequests.length === 0" translate>No members in the blog team</div>
                                <div class="inline-content first-block members-bottom" ng-repeat="member in settings.members track by member._id">
                                    <div class="inline-content padded-right">
                                        <div class="form-input profile-pic">
                                             <figure class="avatar large"><img sd-user-avatar data-user="member" alt="{{member.display_name || member.username }}"></figure>
                                        </div>
                                    </div>
                                    <div class="inline-content">
                                        <div style="margin-top: 25px;">
                                            <div class="form-input" data="original-creator-display-name">
                                               <strong>{{ member.display_name }}</strong>
                                            </div>
                                            <div class="form-input" data="original-creator-username">
                                                {{ member.username }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Pending member -->
                                <div class="inline-content first-block members-bottom" ng-repeat="member in settings.memberRequests track by member._id">
                                    <div class="pending-member-message">
                                        <span class="label label-default" translate>PENDING</span>
                                    </div>
                                    <div class="pending-blog-member">
                                        <div class="inline-content padded-right">
                                            <div class="form-input profile-pic">
                                                 <figure class="avatar large"><img sd-user-avatar data-src="member.picture_url"></figure>
                                            </div>
                                        </div>
                                        <div class="inline-content">
                                            <div style="margin-top: 25px;">
                                                <div class="form-input" data="original-creator-display-name">
                                                   <strong>{{ member.display_name }}</strong>
                                                </div>
                                                <div class="form-input" data="original-creator-username">
                                                    {{ member.username }}
                                                </div>
                                                <div class="form-input accept-blog-membership" data="original-creator-username">
                                                    <a ng-click="settings.acceptMember(member);" data-button="ACCEPT-NEW-MEMBER" translate>ACCEPT</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- end pending member -->
                            </div>
                            <div sd-modal="" data-model="settings.editTeamModal" class="team-edit" macro-team="">
                                <div class="modal__header">
                                    <button class="modal__close pull-right" ng-click="settings.cancelTeamEdit()"><i class="icon-close-small"></i></button>
                                    <h3 class="modal__heading" translate>Team members</h3>
                                </div>
                                <div class="modal__body">
                                    <div translate class="add-label">ADD PEOPLE</div>
                                    <div class="team_settings edit-contributors">
                                        <div ng-if="settings.hasReachedMembersLimit()">
                                          <h3>Sorry.</h3>
                                          <p>You have reached the maximum number of team members for this blog. You can either:</p>
                                          <ul>
                                              <li>1. Unassign a team member from one of your active blogs or</li>
                                              <li>2. Subscribe to a bigger plan.</li>
                                          </ul>
                                          <p>To unassign a team member from this blog, simply move your mouse above the below users and click on the X.</p>
                                          <p>Want to upgrade to a plan more suitable to your needs? Email us at <a href="{{settings.mailto}}">upgrade@liveblog.pro</a> and tell us when and how we can best contact you to take your order.</p>
                                        </div>
                                        <div
                                            lb-user-select-list
                                            ng-if="!settings.hasReachedMembersLimit()"
                                            data-members="settings.posibleMembers"
                                            data-onchoose="settings.addMember(user)"
                                            data-user="settings.original_creator"></div>
                                        <div class="content">
                                            <p ng-if="message">{{ message }}</p>
                                            <div class="member-list clearfix">
                                                <ul>
                                                    <li ng-repeat="user in settings.blogMembers" ng-class="{'inactive' : !user.is_enabled || !user.is_active}">
                                                        <i class="icon-close-small" ng-click="settings.removeMember(user)"></i>
                                                        <figure class="avatar"><img sd-user-avatar data-user="user" alt="{{user.display_name || user.username }}"></figure>
                                                        <div class="name">{{user.display_name}}</div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal__footer">
                                    <button type="button" class="btn btn-default" translate ng-click="settings.cancelTeamEdit()">Cancel</button>
                                    <button type="button" class="btn btn--primary" ng-click="settings.doneTeamEdit()" translate>Done</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Output channels -->
                <div class="split-content tab-content outer outputs" ng-if="(settings.tab === 'outputs')">
                    <div class="header">
                        <h2 translate>Output channels</h2>
                        <div class="dropdown dropdown--align-right pull-right minusMargin1020" dropdown="">
                            <button ng-click="settings.openOutputDialog();" class="navbtn dropdown sd-create-btn dropdown-toggle" dropdown__toggle="" aria-haspopup="true" aria-expanded="false">
                                <i class="icon-plus-large"></i>
                                <span class="circle"></span>
                            </button>
                        </div>
                    </div>
                    <div class="content">
                        <div class="settings-subsection">
                            <!-- OUTPUTS LIST VIEW -->
                            <div class="outputs-list-holder">
                                <div class="shadow-list-holder" sd-shadow>
                                    <ul class="pills-list">
                                        <li ng-repeat="output in settings.outputs" class="clearfix">
                                            <h6 class="pull-left">
                                                <span class="cursor-pointer" ng-click="settings.openOutputDialog(output);" id="output-name">{{ output.name }}</span>
                                            </h6>

                                            <div class="actions">
                                                <button ng-click="settings.showOutputEmbedCode(output);" title="{{ 'Show output chanel embed code' | translate }}">
                                                    <i class="icon-globe"></i>
                                                </button>&nbsp;
                                                <button ng-click="settings.openOutputDialog(output);" title="{{ 'Edit' | translate }}">
                                                    <i class="icon-pencil"></i>
                                                </button>&nbsp;
                                                <button ng-click="settings.removeOutput(output, $index);" title="{{ 'Delete' | translate }}">
                                                    <i class="icon-trash"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li ng-if="settings.outputs.length === 0">
                                            {{ 'No outputs for now' | translate }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="split-content tab-content outer" ng-if="(settings.tab === 'consumers')">
                    <div class="header">
                        <h2 translate>Consumers Settings</h2>
                    </div>
                    <div class="content">
                        <div class="preview-layout consumers-settings" ng-class="{closed: !settings.selectedConsumer}">
                            <div class="list-pane">
                                <div class="content">
                                    <div sd-shadow>
                                        <div class="users-table"
                                            settings-consumer-list
                                            data-consumers="settings.consumers"
                                            data-consumers-settings="settings.consumersSettings"
                                            data-show-tags-selector="settings.showTagsSelector"
                                            data-selected-consumer-tags="settings.selectedConsumerTags"
                                            data-selected="settings.selectedConsumer">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="preview-pane" ng-if="settings.selectedConsumer">
                                <header>
                                    <h3 class="subnav__page-title" translate="">
                                        Settings for {{settings.selectedConsumer.name}}
                                    </h3>
                                    <button ng-click="settings.selectedConsumer = null" class="close-preview">
                                        <i class="icon-close-small"></i>
                                    </button>
                                </header>
                                <div class="content user-details-pane">
                                    <div class="details-info form-flat">
                                        <fieldset class="label-light">
                                            <div class="item">
                                                <label for="tags">Tag(s) to filter content</label>
                                                <tags-selector
                                                    ng-if="settings.showTagsSelector"
                                                    on-change="settings.onConsumerTagsChange"
                                                    selected-tags="settings.selectedConsumerTags"
                                                />
                                                <span class="form-input__hint">Syndication engine use it to filter content that is sent to this consumer</span>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div ng-if="settings.outputsLoading" class="loading-indicator" style="margin-top: 170px;"><span translate>Output channels loading...</span></div>
            </div>
        </div>
    </div>
</div>

<!-- MODAL FOR ADDING EDITING OUTPUTS -->
<output-modal
    modal-active="settings.outputModalActive"
    output="settings.output",
    old-output="settings.oldOutput",
    outputs="settings.outputs"
    blog="settings.blog"
></output-modal>

 <!-- MODAL FOR PRESENTING OUPUT EMBED CODE -->
 <div ng-include="settings.outputEmbedCodeTpl"></div>