<div data-ng-controller="InstagramFeedsManagerController">
    <!-- 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 orange darken-4" id="myHide">
                    <div class="col s12 center">
                        <img src="{{profileData.profileUrl}}" class="profilePicHeade circle margin-top-10" style="border: 3px solid #ffffff59;" />
                        <h5 class="white-text margin-bottom-10">{{profileData.insUserName}}</h5>
                        <i class="fa fa-instagram fa-5x white-text" style="position: absolute; top: 86px; right: 9px; opacity: .3;"></i>
                        <i class="fa fa-instagram fa-5x white-text" style="position: absolute;top: -15px;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.insUserName}}</i>-->
                    </div>
                </div>
                
                
                    <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 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">
                                    <a class="center grey-text text-darken-4">
                                        <!--<i class="icon-clock fa-fw"></i><span> Scedule</span>-->
                                    </a>
                                </div>
                                <div class="col l3 s3 right">
                                    <div class="center">
                                        <a ng-click="openComment(feeds)" class="grey-text text-darken-4"><i class="icon-bubble" aria-hidden="true"></i> Comment</a>
                                    </div>
                                </div>
                                <div ng-if="feeds.review==false" class="col l3 s3 right">
                                    <a class="center grey-text text-darken-4">
                                        <i ng-click="aprovepost(feeds)" class="icon-check fa-fw"></i><span> Approve</span>
                                    </a>
                                </div>
                                <div ng-if="feeds.review==true" class="col l3 s3 right">
                                    <a class="center green-text">
                                        <i  ng-click="aprovepost(feeds)" class="icon-check fa-fw green-text"></i><span> Approved</span>
                                    </a>
                                </div>

                            </div>
                            <label class="grey-text text-darken-2 secondary-content">{{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>

    </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;
        }

    .right {
    }
</style>
