<style>
    ul.shinh li label {
        font-size: 14px;
        color: grey;
        padding: 0 10px;
        color: #ff4081;
    }

    ul.shinh li:hover {
        background: #e5e5e5;
        color: #ff4081;
        cursor: pointer;
        padding: 0 10px;
    }

    ul.shinh li label input {
        margin-right: 10px;
        height: 20px;
        width: 20px;
        background: transparent !important;
    }
</style>

<style>
    .rssPostImage {
        width: 674px;
        max-height: 357px;
        overflow: hidden;
        border-radius: 5px;
        display: block;
        margin: 0 auto;
        /*float: left;
        margin-top: 23px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-left: 2px;*/
    }
</style>
<div data-ng-controller="RssNewsController">
    <!-- Page name -->
    <div class="container">
        <div class="row">
            <div class="col m8">
                <h4>Content Feeds</h4>
            </div>
            <div class="col l4" id="abc">
                <a class="btn btn_style modal-trigger right margin-top-10 btn_round" href="#rssSettingModal">Content Setting</a>
            </div>
        </div>
    </div>


    <!-- START CONTENT -->
    <section id="content">
        <!-- Compose Email Structure -->
        <div class="row">
            <div class="col offset-s1 s10 offset-m2 m7 offset-l2 l8">
                <div class="card" ng-repeat="post in postedRssData | orderBy:'publishingDate':true">
                    <div class="card-content">
                        <span ng-click="deleteMsg(post.link)" class="right" role="button" tabindex="0" style="margin-right: 5px;"><i class="fa fa-close grey-text"></i></span>
                        <div class="row"  charset="utf-8">
                            <div class="col l12">
                                <h6 style="color:#777"><strong>{{post.title}}</strong></h6>
                                <div class="">
                                    <a href="{{post.link}}" class="truncate" target="_blank" style="color:cornflowerblue" >{{post.link}}</a>
                                </div>
                            </div>
                         </div>
                         <div class="row">
                                    <div class="col l12">
                                        <div style="display: block; margin: auto;">
                                            <img src="{{post.image}}" class="rssPostImage">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-action">
                                <a ng-click="schedulePost(post)" class="waves-effect waves-grey btn">Schedule</a>
                                <a ng-click="openComposeMessage(post)" class="btn right blue">1 click</a>
                            </div>

                        </div>
                    </div>
        </div>


        <!-- Compose Email Trigger -->
        <!--<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
            <a class="btn-floating btn-large red modal-trigger" href="#ComposePostModal">
                <i class="large mdi-editor-mode-edit  animated bounceIn infinite"></i>
            </a>
        </div>-->
        <!-- Compose Email Structure -->
        <div id="ComposePostModal" class="modal">
            <div class="modal-content">
                <nav class="red">
                    <div class="nav-wrapper">
                        <div class="left col s12 m5 l5">
                            <ul>
                                <li>
                                    <a href="javascript:void(0)" class="email-type">Compose</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </nav>
            </div>
            <div class="model-email-content">
                <div class="row no-space">
                    <form class="col s12">
                        <div class="row no-space">
                            <div class="col s12 m6">
                                <div class="input-field col s12">
                                    <div class="emoji-picker-container">
                                        <textarea id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="500">{{contentMessage.link}}</textarea>
                                    </div>
                                </div>
                                <div class="row no-space">
                                    <div class="col s12 m12 l12">
                                        <p>Select your file [Ex: gif, jpeg, png, mp4, ...]</p>
                                    </div>
                                    <input type="hidden" id="imageUrl"  />
                                    <div class="col s12 m12 l12">
                                        <input type="file" id="composeImage" class="dropify" after-render data-default-file="" />
                                    </div>
                                    <div class="col s12 m12 l12" ng-if="!contentMessage">
                                        <input type="file" id="composeImage" class="dropify" after-render data-default-file="" />
                                    </div>
                                </div>
                            </div>
                            <div class="col s12 m6">
                                <div class="row">
                                    <div class="input-field col s12">
                                        <input ng-model="query[queryBy]" id="search_name" type="text" class="validate">
                                        <label for="search_name">Search Profile</label>
                                    </div>
                                    <ul class="col s12 shinh" id="checkboxdata" style="max-height:250px; overflow-y:scroll;">
                                        <li style="padding:5px 0;">
                                            <label>
                                                <input type="checkbox" style="visibility:visible;position:relative;left:5px; float:left" id="checkAll" onclick="check();" />
                                                <span style="float:left;">Check All</span>
                                            </label>
                                        </li>
                                        <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:0} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13' }" style="padding:5px 0;">
                                            <label>
                                                <input onclick="profile();" name="selector[]" class="subcheckbox" id="urlfb_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                                <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                                <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                                <span style="float:right;"><img ng-src="/contents/socioboard/images/fb_icon.png"></span>
                                            </label>
                                        </li>
                                        <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:1} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                            <label>
                                                <input onclick="profile();" name="selector[]" class="subcheckbox" id="urlfb_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                                <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                                <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                                <span style="float:right;"><img ng-src="/contents/socioboard/images/Fb_page-icon.png"></span>
                                            </label>
                                        </li>
                                        <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:2}" style="padding:5px 0;">
                                            <label>
                                                <input name="selector[]" onclick="profile();" class="subcheckbox" id="tw_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                                <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                                <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                                <span style="float:right;"><img ng-src="/contents/socioboard/images/twticon.png"></span>
                                            </label>
                                        </li>
                                        <li ng-repeat="profile in lstProfiles |filter:query | filter:{profileType:3} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                            <label>
                                                <input name="selector[]" onclick="profile();" class="subcheckbox" id="lin_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                                <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                                <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                                <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                            </label>
                                        </li>
                                        <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:4}" style="padding:5px 0;">
                                            <label>
                                                <input name="selector[]" onclick="profile();" class="subcheckbox" id="Cmpylinpage_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                                <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                                <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                                <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row no-space">
                            <!--<a href="" class="btn btn_style blue_btn_style left" ng-click="draftMsg()">Save as Draft</a>-->
                            <div class="right btn btn_style blue_btn_style">
                                <div ng-show="disbtncom" ng-click="ComposeMessage()">send</div>
                                <div ng-show="!disbtncom"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        
   
    <!-- END CONTENT -->

        <!-- Rss Settings Structure -->
        <div id="rssSettingModal" class="modal">
            <div class="modal-content">
                <div class="row no-space">
                    <div class="col s12 m12 l12">
                        <p>Add your keywords</p>
                    </div>
                    <div class="input-field col s12">
                        <input name="tags" id="tags" multiple />
                    </div>
                </div>
                <div class="row center">
                    <div ng-init="buildbtn= {{buildbtn}}"></div>
                    <div>
                        <!--<div ng-show="buildbtn" class="btn btn_style" ng-click="rssContentsData()">Build My Content Feed</div>contentfeedsdata-->
                        <div ng-show="buildbtn" class="btn btn_style" ng-click="rssContentsData()">Build My Content Feed</div>
                        <div ng-show="!buildbtn"> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
                    </div>
                </div>
                <!--<div class="row">
                    <p>keywods ...</p>
                    <a href="javascript:void(0);" class="">tag1</a>
                    <a href="javascript:void(0);" class="">tag1</a>
                    <a href="javascript:void(0);" class="">tag1</a>
                    <a href="javascript:void(0);" class="">tag1</a>
                    <a href="javascript:void(0);" class="">tag1</a>
                </div>-->
            </div>
        </div>
    </section>
    <!-- END CONTENT -->



    <div ng-if="fetchdatacomplete!=true">
        <br /><br /><br /><br /><br /><br />
        <div class="center">
            <div class="preloader-wrapper small active">
                <div class="spinner-layer spinner-green-only">
                    <div class="circle-clipper left">
                        <div class="circle"></div>
                    </div><div class="gap-patch">
                        <div class="circle"></div>
                    </div><div class="circle-clipper right">
                        <div class="circle"></div>
                    </div>
                </div>
            </div>
            <br />
            <h6 style="color:gray; font-size:18px; font-family:Calibri;">Please wait while we are processing</h6>

        </div>
    </div>


    <div class="center" ng-if="nofeeds==true">
        <br /><br /><br /><br /><br /><br />
        <h6 style="color:gray; font-size:20px; font-family:Calibri"><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />Sorry, No RSS feeds posted to display<br /></h6>
    </div>

</div>

<script>
    $(function() {
      // Initializes and creates emoji set from sprite sheet
      window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: '../contents/socioboard/global/plugins/emoji-picker/lib/img/',
        popupButtonClasses: 'fa fa-smile-o'
      });
      window.emojiPicker.discover();
    });

    function check() {
        var flag = $('#checkAll').is(":checked");
        $('#checkboxdata input:checkbox').each(function () {
            $(this).prop('checked', flag);
        });
    }

    

    function profile() {
        var count = 0;
        $("#checkboxdata  :checkbox").each(function () {
            if (this.id != 'checkAll') {
                if (!($("#" + this.id).prop('checked'))) {
                    count++;
                }
            }
        });

        if (count > 0) {
            //alert("no "+count);
            $("#checkAll").prop('checked', false);
        }
        if (count == 0) {
            //alert("yess " + count);
            $("#checkAll").prop('checked', true);
        }
    }
</script>