<div sd-modal="" data-model="modalActive">
    <div class="modal__header">
        <button class="modal__close pull-right" ng-click="cancel()"><i class="icon-close-small"></i></button>
        <h3 translate>Attach Syndicated blog</h3>
    </div>
    <div
        class="modal__body"
        style="min-height: 300px;"
        ng-if="producers._items.length === 0">
        <p translate>No producers have been found</p>
        <p translate>Please add a producer in the syndication menu</p>
    </div>
    <div
        class="modal__body"
        style="min-height: 300px;"
        ng-if="producers._items.length > 0">
        <span class="label label--simple label--no-padding">Choose Producer</span>
        <div class="select-producer">
            <select
                ng-class="{'full': !producerBlogs._items}"
                ng-model="producerId"
                ng-change="selectProducer(producerId)">
                <option
                    ng-repeat="producer in producers._items"
                    value="{{producer._id}}">
                    {{producer.name}}
                </option>
            </select>
            <button
                class="btn btn-primary"
                ng-click="refreshBlogList()"
                ng-if="producerBlogs._items">
                <i class="icon-refresh"></i>
            </button>
        </div>
        <div ng-if="producerBlogs._items.length === 0" translate>
            The selected producer hasn't made any blogs available for syndication yet.
        </div>
        <ul class="producers-list" ng-if="producerBlogs._items.length > 0">
            <li
                ng-repeat="blog in producerBlogs._items"
                ng-click="check(blog)"
                class="blog-item"
                ng-class="{checked: blog.checked}">
                <h4>{{blog.title}}</h4>
                <dl class="panel-definition-list">
                    <dt class="panel-definition-list__term">Producer:</dt>
                    <dd class="panel-definition-list__definition">{{currentProducer.name}}</dd>
                </dl>
                <dl class="panel-definition-list">
                    <dt class="panel-definition-list__term">Autopublish</dt>
                    <dd class="panel-definition-list__definition">
                        <span
                            sd-switch
                            ng-change="syndicate(blog)"
                            ng-model="blog.auto_publish"
                            ng-hide="isAlreadySyndicated(blog)"
                            class="sd-toggle--vertical-middle"></span>
                    </dd>

                    <dt class="panel-definition-list__term" translate>Status</dt>
                    <dd class="panel-definition-list__definition">
                        <div ng-if="blog.blog_status=='closed'" class="state-label state-draft state-label--no-float" translate>Archived</div>
                        <div ng-if="blog.blog_status=='open'" class="state-label state-published state-label--no-float" translate>Active</div>
                    </dd>

                </dl>
            </li>
        </ul>
    </div>
    <div class="modal__footer">
        <button
            ng-if="producers._items.length > 0"
            class="btn btn--primary"
            type="button"
            ng-click="attach()"
            ng-disabled="hasChanged"
            translate>{{actionName}}</button>
        <button
            ng-if="producers._items.length === 0"
            class="btn btn-default"
            type="button"
            ng-click="cancel()"
            translate>Close</button>
    </div>
</div>
