<div data-ng-controller="LinkedinPageFeedsManagerController">
    <!-- START CONTENT -->
    <section id="content">
        <!--start container-->
        <!--card widgets end-->
        <div class="row">
            <div class="col offset-s1 s10 offset-m1 m10 offset-l1 l10">
                <div class="card light-blue darken-2" id="myHide">
                    <div class="col s12 center">
                        <img src="{{profileData.logoUrl}}" class="profilePicHeade circle margin-top-10" style="border: 3px solid #ffffff59;" />
                        <h5 class="white-text margin-bottom-10">{{profileData.linkedinPageName}}</h5>
                        <i class="fa fa-linkedin fa-5x white-text" style="position: absolute; top: 86px; right: 9px; opacity: .3;"></i>
                        <i class="fa fa-linkedin fa-5x white-text" style="position: absolute;top: -25px;right: 40px;opacity: 0.15;font-size: 24em;"></i>
                        <!--<i class="fa white-text" style="position: absolute;top: 30px;left: 1px;opacity: 0.1;font-size: 8em;font-family: cursive;">{{profileData.linkedinPageName}}</i>-->
                    </div>
                </div>
                <div class="card">
                    <nav>
                        <div class="nav-wrapper">
                            <ul id="nav-mobile" class="left hide-on-med-and-down">
                                <li ng-click="hideHeader()"><a href="javascript:void(0)"><i class="fa fa-eye"></i>{{hideheadernames}}</a></li>
                            </ul>
                                <a class='dropdown-button' href='#' data-activates='dropdown1'>Last created</a>

                                <ul id='dropdown1' class='dropdown-content'>
                                    <li><a href="#!">First scheduled</a></li>
                                    <li><a href="#!">Last scheduled</a></li>
                                    <li><a href="#!">First created</a></li>
                                    <li><a href="#!">First created</a></li>
                                </ul>
                        </div>
                    </nav>
                </div>
                <div class="card" id="feeds">
                    <ul class="collection facebookfeeds">
                        <li class="collection-item avatar" ng-repeat="feeds in feedsSavedData">
                            <img src="{{feeds.picUrl}}" alt="Chanchal Santra" class="circle">
                            <span class="email-title">{{feeds.socialProfileName}}</span>
                            <div class="row feeds_post z-depth-1 hoverable">
                                <div class="col m8">
                                    <p class="break_word ultra-small">{{feeds.shareMessage}}</p>
                                </div>
                                <div class="col m4 ">
                                    <div class="tooltip right">
                                        <a ng-click="deletePost(feeds.strId)" href="javascript:void(0)"><i class="fa fa-times myColor" aria-hidden="true"></i></a>
                                        <span class="tooltiptext">Delete</span>
                                    </div>
                                </div>
                                <!-- img -->
                                <div class="col m4 center" ng-if="feeds.mediaType == 1">
                                    <img src="{{feeds.url}}" class="responsive-img">
                                </div>
                                <!-- video -->
                                <div class="col m4 center" ng-if="feeds.mediaType == 2">
                                    <video class="responsive-video" controls>
                                        <source src="{{feeds.url | Url}}" type="video/mp4">
                                    </video>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col l3 s3">
                                    <a class="center grey-text text-darken-4">
                                        <i class="icon-action-undo fa-fw"></i><span> Publish Now</span>
                                    </a>
                                </div>
                                <div class="col l3 s3" ng-if="feeds.schedOrNotstatus ==0">
                                    <a ng-click="openSchedule(feeds)" class="center grey-text text-darken-4">
                                        <i class="icon-clock fa-fw"></i><span> Schedule</span>
                                    </a>
                                </div>
                                <div class="col l3 s3" ng-if="feeds.schedOrNotstatus ==1">
                                    <a ng-click="openSchedule(feeds)" class="myBtn center white-text text-darken-4">
                                        <i class="icon-clock fa-fw"></i><span> Scheduled</span>
                                    </a>
                                </div>
                                <div ng-if="feeds.review==false" class="col l3 s3 right">
                                    <a ng-click="aprovepost(feeds)" class="center grey-text text-darken-4">
                                        <i class="icon-check fa-fw"></i><span> Approve</span>
                                    </a>
                                </div>
                                <div ng-if="feeds.review==true" class="col l3 s3 right">
                                    <a ng-click="aprovepost(feeds)" class="myBtn  center white-text">
                                        <i class="icon-check fa-fw white-text"></i><span> Approved</span>
                                    </a>
                                </div>
                                <!--<div ng-if="feeds.review==true" class="col l3 s3 right">
                                    <a ng-click="aprovepost(feeds)" class="center grey-text text-darken-4">
                                        <i class="icon-check fa-fw"></i><span> Approve</span>
                                    </a>
                                </div>
                                <div class="col l3 s3">
                                    <a ng-click="aprovepost(feeds)" class="myBtn  center white-text">
                                        <i class="icon-check fa-fw white-text"></i><span> Approved</span>
                                    </a>
                                </div>-->
                            </div>
                            <label class="grey-text text-darken-2 secondary-content" data-position="left" title="{{feeds.savedTime * 1000 | date:'yyyy-MM-dd HH:mm:ss Z'}}">{{feeds.savedTime * 1000 | date}} - {{feeds.savedTime * 1000 | date:'HH:mm'}}</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--end container-->
        <!-- 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"></i>
            </a>
        </div>

        <!-- Compose Email Structure -->
        <div id="ComposePostModal" class="modal">
            <div class="model-email-content">
                <div class="row no-space">
                    <form class="col s12">
                        <!--Default version-->
                        <div class="row section">
                            <div class="col s12 m6">
                                <p>Select your file</p>
                                <input type="file" id="input_file" class="dropify" data-default-file="" />
                            </div>
                            <div class="input-field col s12 m6">
                                <textarea id="compose" class="materialize-textarea" length="500"></textarea>
                                <label for="compose">Compose email</label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <a class="modal-action waves-effect waves-green btn blue_btn_style btn-flat" ng-click="ComposeMessage()">Connect</a>
                <a class="modal-action modal-close waves-effect waves-green btn btn_round btn-flat">Close</a>
            </div>
        </div>

        <!--//fbpage comments module-->
        <div id="commentModal" class="modal" style="min-height:100px;">
            <div class="modal-content">
                <form class="row no-space">
                    <div class="col s6 center">

                        <video class="responsive-video" controls ng-if="selectedFeed.mediaType == 2">
                            <source src="{{selectedFeed.url | Url}}" type="video/mp4">
                        </video>

                        <img class="responsive-img" ng-src="{{selectedFeed.url}}" ng-if="selectedFeed.mediaType == 1" />

                        <p class="no-space">
                            {{selectedFeed.shareMessage}}
                        </p>

                    </div>
                    <div class="col s6">
                        <div class="m_comm">
                            <div ng-repeat="comment in allcomment">
                                <div class="grey-text text-darken-1"><span><b>{{comment.userName}}</b></span> : <span class="break_word ultra-small" style="word-wrap:break-word; white-space:pre-line; line-break:auto">{{comment.commentText}}</span></div>
                            </div>
                        </div>
                        <div class="input-field col s10">
                            <input id="postcomment_text" placeholder="Add a comment.." class="" type="text" ng-model="postcommentText">
                        </div>
                        <div class="input-field col s1">
                            <a class="btn btn_style btn_round" ng-click="addComment(selectedFeed, postcommentText)">send</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--//fbpage schedule module-->
        <div id="scheduleModal" class="modal" style="min-height:100px;">
            <div class="modal-content">
                <form class="row no-space">
                    <div class="col s6 center">

                        <video class="responsive-video" controls ng-if="selectedFeedsch.mediaType == 2">
                            <source src="{{selectedFeedSch.url | Url}}" type="video/mp4">
                        </video>

                        <img class="responsive-img" ng-src="{{selectedFeedsch.url}}" ng-if="selectedFeedsch.mediaType == 1" />

                        <p class="no-space">
                            {{selectedFeedsch.shareMessage}}
                        </p>

                    </div>
                    <div class="col s6">
                        <div class="input-field col s12">
                            <input type="date" class="datepicker">
                            <label for="dob">DATE</label>
                        </div>
                        <div class="input-field col s12">
                            <div class="input-field col s4">
                                <select id="hourSelect" name="hourSelect" ng-click="hour_select(value)">
                                    <option value="" disabled selected>hour</option>
                                    <option value="01">01</option>
                                    <option value="02">02</option>
                                    <option value="03">03</option>
                                    <option value="04">04</option>
                                    <option value="05">05</option>
                                    <option value="06">06</option>
                                    <option value="07">07</option>
                                    <option value="08">08</option>
                                    <option value="09">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                </select>
                            </div>
                            <div class="input-field col s4">
                                <select id="minSelect" name="minSelect" ng-click="min_select(value)">
                                    <option value="" disabled selected>min</option>
                                    <option value="01">01</option>
                                    <option value="02">02</option>
                                    <option value="03">03</option>
                                    <option value="04">04</option>
                                    <option value="05">05</option>
                                    <option value="06">06</option>
                                    <option value="07">07</option>
                                    <option value="08">08</option>
                                    <option value="09">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                    <option value="29">29</option>
                                    <option value="30">30</option>
                                    <option value="31">31</option>
                                    <option value="32">32</option>
                                    <option value="33">33</option>
                                    <option value="34">34</option>
                                    <option value="35">35</option>
                                    <option value="36">36</option>
                                    <option value="37">37</option>
                                    <option value="38">38</option>
                                    <option value="39">39</option>
                                    <option value="40">40</option>
                                    <option value="41">41</option>
                                    <option value="42">42</option>
                                    <option value="43">43</option>
                                    <option value="44">44</option>
                                    <option value="45">45</option>
                                    <option value="46">46</option>
                                    <option value="47">47</option>
                                    <option value="48">48</option>
                                    <option value="49">49</option>
                                    <option value="50">50</option>
                                    <option value="51">51</option>
                                    <option value="52">52</option>
                                    <option value="53">53</option>
                                    <option value="54">54</option>
                                    <option value="55">55</option>
                                    <option value="56">56</option>
                                    <option value="57">57</option>
                                    <option value="58">58</option>
                                    <option value="59">59</option>
                                    <option value="60">60</option>

                                </select>
                            </div>
                            <div class="input-field col s4">
                                <select id="AmPmSelect" name="AmPmSelect" ng-click="ampm_select(value)">
                                    <option value="" disabled selected>AM / PM</option>
                                    <option value="AM">AM</option>
                                    <option value="PM">PM</option>
                                </select>

                            </div>
                        </div>
                        <div class="input-field col s1">
                            <a class="btn btn_style btn_round" ng-click="schdule(selectedFeedsch)">schedule</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </section>
    <!-- END CONTENT -->
</div>








<style>
    .myColor:hover {
        color: red;
    }
    .myColor{
        color:#757575;
    }

    .tooltip {
        position: relative;
        display: inline-block;
    }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 76px !important;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 226% !important;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }

            .tooltip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    #myHide {
    transition:2s;
    }
     .right {
    }
    .modal {
        max-height:none!important;
        height:75%!important;
    }

   
    .myBtn{
      border: 2px solid green;
      border-radius: 20px;
      padding: 3px 12px;
      background:green;
   
</style>

