<div ng-class="{ 'wt-noticeboard-create-item-video': isVideoEnabled,'wt-noticeboard-create-item': !isVideoEnabled }">
    <form role="form" class="col-md-12" ng-controller="Wizdom365NoticeboardCreateEditController">
        <style>
            .peoplePickerDialog {
                background-color: red;
                width: 80%;
                height: 80%;
                position: fixed;
                top: 10%;
                left: 10%;
                z-index: 2;
            }
        </style>
        <div class="form-group">
            <label for="newsTitle">{{'Title' | translate}}</label>
            <input type="text" class="form-control ie11focusfix" id="newsTitle" ng-model="newsTitle" placeholder="{{'Title' | translate}}" required />
        </div>
        <div class="form-group" ng-show="isVideoEnabled">
            <label>{{'Video link' | translate}}</label>
            <input type="text" class="form-control" placeholder="{{'Supported video formats: youtube vimeo .mp4 .webm .ogg' | translate}}" ng-model="videoLink" ng-change="checkUrl()" required>
            <span class="label label-danger" ng-show="invalidUrl">{{'This video format is not supported. Please provide valid link (youtube vimeo .mp4 .webm .ogg)' | translate}}</span>
        </div>

        <div class="form-group" ng-show="isVideoEnabled">
            <label>{{'Video poster' | translate}}</label>
            <wizdom365-image-picker ng-model="videoImage"></wizdom365-image-picker>
            <img ng-src="{{videoImage}}" style="max-width: 200px; max-height: 200px" ng-show="videoImage" />
            <span class="glyphicon glyphicon-trash" aria-hidden="true" ng-show="videoImage" ng-click="deleteVideoImage()"></span>
        </div>

        <div class="form-group" wizdom-Lazy-Load="ui.tinymce">
            <label for="newsContent">{{'Content' | translate}}</label>
            <textarea class="form-control" ng-model="newsContent" style="height:200px"
                      ui-tinymce="tinyMceOptions"
                      toolbar-configuration="Noticeboard"
                      mentio-iframe-element="iframeElement"
                      mentio
                      mentio-trigger-char="'@'"
                      mentio-require-leading-space="true"
                      mentio-items="searchPrincipals"
                      mentio-template-url="/mentionTemplate.html"
                      mentio-search="searchForMention(term)"
                      mentio-select="selectUser(item)"></textarea>
            <script type="text/ng-template" id="/mentionTemplate.html">
                <ul class="list-group user-search" style="padding-left:0; z-index:1000">
                    <li mentio-menu-item="principal" ng-repeat="principal in items" class="list-group-item">
                        <div style="display:inline-block; vertical-align:middle" class="presence" wizdom365-presence-picture="" size="AVATAR" accountname="::principal.loginName" name="::principal.principalID"></div>
                        <span class="text-primary" ng-bind-html="::(principal.displayName | mentioHighlight:typedTerm:'menu-highlighted' | unsafe)"></span>
                    </li>
                </ul>
            </script>
        </div>

        <div class="row">
            <div class="form-group col-md-6">
                <label for="startDate">{{'Start date' | translate}}</label>
                <div style="margin-top:-30px;" wizdom365-datetime-picker="" disable-previously-dates="true" date="startDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
            </div>

            <div class="form-group col-md-6">
                <label for="endDate">{{'End date' | translate}}</label>
                <div style="margin-top:-30px;" wizdom365-datetime-picker="" min-date="startDate" date="endDate" disable-weekends="false" show-date-picker="true" show-time-picker="true"></div>
            </div>
        </div>

        <div class="form-group" ng-show="selectedcontenttype.metaData.useAlternativeAuthor">
            <label>{{'Alternate author' | translate}}</label> &nbsp;&nbsp;
            <span ng-show="altAuthor != null">
                {{(altAuthor.category? '('+altAuthor.category+') ':'')}}{{altAuthor.displayName}}<span ng-if="altAuthor.loginName">&nbsp;&lt;{{altAuthor.loginName}}&gt;</span> <b class="text-danger pointer" ng-click="removeAltAuthor();" ng-show="altAuthor != null">{{'Remove' | translate}}</b>
            </span>
            <div ng-show="altAuthor == null">

                <input type="text" ng-model="asyncSelected"
                       placeholder="{{'Select alternate author' | translate}}"
                       typeahead-on-select="addAltAuthor($item, $model, $label);"
                       typeahead="user as (user.category? '('+user.category+') ':'')+user.displayName + (user.loginName ? ' <' + user.loginName + '>' : '') for user in searchForPrincipal($viewValue,true) | limitTo:5" typeahead-loading="loadingLocations" typeahead-template-url="customTemplate.html" class="form-control" typeahead-min-length="2">
                <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
            </div>
            <script type="text/ng-template" id="customTemplate.html">
                <a>
                    <div style="display:inline-block; vertical-align:middle" class="presence" wizdom365-presence-picture="" size="AVATAR" accountname="match.model.loginName" name="match.model.principalID"></div>
                    <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                </a>
            </script>
        </div>
        <div class="form-group" ng-show="!isVideoEnabled && selectedcontenttype.metaData.useRollupImage">
            <label>{{'Publishing image' | translate}}</label>
            <wizdom365-image-picker ng-model="newsImage"></wizdom365-image-picker>
            <img ng-src="{{newsImage}}" style="max-width: 200px; max-height: 200px" ng-show="newsImage" />
            <span class="glyphicon glyphicon-trash" aria-hidden="true" ng-show="newsImage" ng-click="deleteImage()"></span>
        </div>
        <div class="checkbox form-group" ng-show="socialFeatureEnabled">
            <label>
                <input type="checkbox" ng-model="allowComments" />{{'Allow social (likes and comments)' | translate}}
            </label>
            <div ng-show="allowComments && socialFeatureEnabled">
                <div>
                    <label>
                        <input type="checkbox" ng-model="notifyNewCommentViaEmail" />{{'Notify new comments by email' | translate}}
                    </label>
                </div>
                <div ng-show="enableNotification">
                    <label>
                        <input type="checkbox" ng-model="notifyNewCommentViaNotification" />{{'Notify new comments by notification' | translate}}
                    </label>
                </div>
            </div>
        </div>

    </form>
</div>
