<style>
    button:focus {
        outline: 2px solid #000;
        outline-offset: 1px;
    }
</style>  
<div data-ng-controller="DiscoveryController">
    <!-- START CONTENT -->
    <section id="content">
        <!--start container-->
        <div class="row">
            <div class="col l12">
                <h4>Discovery allows you to find new customers by searching with keywords around your business.</h4>
            </div>
        </div>
        <!--card widgets end-->
        <div class="row">

            <form class="col s12" name="discoveryform">
                <div class="row">
                    <div class="input-field col s10">
                        <i class="material-icons icon-note prefix"></i>
                        <input id="discoverytext" type="text" ng-pattern="/^[a-z]+[@+!+#][a-z]*$/" ng-model="discoverytext" required name="discoverytext" >
                        <label for="icon_prefix">Type your Keyword here...</label>
                    </div>
                    <div ng-init="dispbtn= {{dispbtn}}"></div>
                    <div class="col s2">
                        <button type="submit" ng-show="dispbtn" ng-click="discovery()" class="btn">
                            <i class="fa fa-search"></i>
                        </button>
                        <button ng-show="!dispbtn"  class="btn">
                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                        </button>
                    </div>
                </div>
                
            </form>
            <div class="col s12 m9 l9">


                <!-- twitter -->
                <div class="card" id="feeds">
                    <h5 class="feeds_title blue lighten-3 white-text"><i class="icon-social-twitter"></i>Twitter Posts</h5>
                    <ul class="collection twtfeeds">
                        <li class="collection-item avatar" ng-repeat="twtfeed in lstDiscoverySearchTwitter">
                            <img ng-src="{{twtfeed.profileImageUrl}}" alt="{{twtfeed.fromName}}" class="circle">
                            <span class="email-title">{{twtfeed.fromName}}</span>
                            <div class="row feeds_post z-depth-1 hoverable">
                                <div class="col m8">
                                    <p class="break_word ultra-small">{{twtfeed.message}}.</p>
                                </div>
                            </div>
                            <a class="tooltipped secondary-content" data-position="left">{{twtfeed.createdTime}}</a>
                        </li>
                     </ul>
                </div>

                <!-- gplus  -->
                <div class="card" id="feeds">
                    <h5 class="feeds_title red darken-2 white-text"><i class="fa fa-google-plus"></i>GooglePlus Posts</h5>
                    <ul class="collection gplusfeeds">
                        <li class="collection-item avatar" ng-repeat="gplusfeed in lstDiscoverySearchGplus">
                            <img ng-src="{{gplusfeed.profileImageUrl}}" alt="{{gplusfeed.fromName}}" class="circle">
                            <span class="email-title">{{gplusfeed.fromName}}</span>
                            <div class="row feeds_post z-depth-1 hoverable">
                                <div class="col m8">
                                    <p class="break_word ultra-small">{{gplusfeed.message}}.</p>
                                </div>
                            </div>
                            <a class="tooltipped secondary-content" data-position="left" href="{{gplusfeed.messageId}}">{{gplusfeed.createdTime}}</a>
                        </li>


                    </ul>
                </div>

                <!-- instagram -->
                <div class="card" id="feeds">
                    <h5 class="feeds_title instagram_color white-text"><i class="fa fa-instagram"></i>Instagram Posts</h5>
                    <ul class="collection instagramfeeds">
                        <li class="collection-item avatar" ng-repeat="insfeed in lstDiscoverySearchinstagram">
                            <img class="circle" ng-src="{{insfeed.imageUrl}}" alt="{{insfeed.adminUser}}">
                            <span class="email-title">{{insfeed.adminUser}}</span>
                            <div class="row feeds_post z-depth-1 hoverable">
                                <div class="col m8">
                                    <p class="break_word ultra-small">{{insfeed.feed}}.</p>
                                </div>
                                <div class="col m4 center" ng-if="{{insfeed.feedImageUrl}}">
                                </div>
                            </div>
                            <a data-position="left" class="tooltipped secondary-content">{{insfeed.feedDate}}</a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="col s12 m3 l3">
                <div class="card" id="feeds">
                    <h5 class="feeds_title blue darken-2 white-text"><i class="icon-layers"></i>Search History</h5>
                    <div class="section section_filter">
                        <div>
                            <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light margin-top-10" style="text-transform: inherit;" ng-click="discovery(history.searchKeyword)" ng-repeat="history in DiscoveryHistory">{{history.searchKeyword}}</button>
                            <!--<a ng-click="discovery(history.searchKeyword)" class="collection-item active" ng-repeat="history in DiscoveryHistory">{{history.searchKeyword}}</a>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end container-->
       
      
    </section>
    <!-- END CONTENT -->

    
</div>
