<style type="text/css">
    .device_pin, .web_pin{
        background-color: grey;
        border: 4px double #ffffff;
    }
    .activeButton{
        border: 4px double rgba(70, 70, 70, 0.98);
        background-color: #E91E63 !important;
    }
</style>
     <div data-ng-controller="PinterestBoardPinsController">
        <!-- Page name -->
        <div class="container">
            <div class="row">
                <div class="col l12 s12">
                    <h4>Board Pins</h4>
                </div>
                <div class="col l10 m10 s12">
                    <h4 class="grey-text text-darken-4">{{lstpin._MongoPinterestBoard.boardname}}</h4>
                    <h5>Pins : <strong class="pink-text text-darken-1">{{lstpin._MongoPinterestBoard.pinscount}}</strong></h5>
                    <h5>Followers : <strong class="pink-text text-darken-1">{{lstpin._MongoPinterestBoard.followerscount}}</strong></h5>
                </div>
            </div>
        </div>

        <!-- statr pins_board list -->
        <div id="pins_board" class="row">
            <div class="product-sizer"></div>
            <!-- create pin -->
            <div class="product">
                <div class="card">
                    <div class="card-content">
                        <div class="row no-space">
                            <div class="col s12 center">
                                <a href="#CreatePinModal" class="modal-trigger"> 
                                    <i class="fa fa-plus-circle fa-5x pink-text text-darken-1" aria-hidden="true"></i>
                                </a>
                                <p class="card-title grey-text text-darken-4">
                                    <a href="#CreatePinModal" class="truncate modal-trigger grey-text text-darken-4">Save Pin</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- all post -->
            <div class="product" ng-repeat="userpins in lstpin.lstMongoPinterestUserPins" my-repeat-feed-timeout-directive>
                <div class="card">
                    <div class="card-image waves-effect waves-block waves-light">
                        <a href="{{userpins.url}}" target="_blank" class="btn-floating btn-large btn-pin waves-effect waves-light pink darken-1"><span><i class="fa fa-thumb-tack fa-fw" aria-hidden="true"></i>{{userpins.repinscount}}</span></a>
                        <a href="{{userpins.url}}" target="_blank"><img src="{{userpins.imageurl}}" alt="product-img">
                        </a>
                    </div>
                    <ul class="card-action-buttons">
                        <li>
                            <a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                        </li>
                    </ul>
                    <div class="card-content">
                        <div class="row">
                            <div class="col s8 margin-top-10">
                                <p class="card-title grey-text text-darken-4">
                                    <a href="{{userpins.creatorurl}}" class="grey-text text-darken-4"><i class="fa fa-pinterest-p fa-fw red-text"></i>@{{userpins.boardname}}</a>
                                </p>
                            </div>
                            <div class="col s4 no-padding center">
                                <a href="{{userpins.creatorurl}}">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-reveal">
                        <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i>{{userpins.metasite_name}}</span>
                        <p>{{userpins.metatitle}}</p>
                    </div>
                </div>
            </div>
        </div>
        <!--/ end items list -->

         <!-- CreatePinModal  -->
         <div id="CreatePinModal" class="modal">
             <div class="modal-content">
                 <a href="javascript:void(0)" class="modal-action modal-close waves-effect waves-pink btn-flat right"><i class="icon-close"></i></a>
                 <h4>Save from</h4>
                 <div class="row no-space">
                     <div class="manage-mesage-comments">
                         <div class="col s12 m6">
                             <a class="card-panel web_pin col l12 m12 s12">
                                 <span class="white-text center"><h5>The Web</h5></span>
                             </a>
                         </div>
                         <div class="col s12 m6">
                             <a class="card-panel device_pin col l12 m12 s12">
                                 <span class="white-text center"><h5>Your Device</h5></span>
                             </a>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col l12 m12 s12 web_pin_div" style="display: none;">
                         <div class="row no-space">
                             <div class="col l12 m12 s12">
                                 <div class="card-panel">
                                     <div class="row">
                                         <div class="col l12 s12"><h5 class="no-space">Save from a website</h5></div>
                                         <div class="input-field col s10">
                                             <input placeholder="https://kot.rogacz.com/Science/Studies/06/lpp/projekt/Installer/ServerInstaller/Resources/png/DotNet-513.png" onchange="angular.element(this).scope().CheckStatus()" id="web_url" type="text" class="validate">
                                             <label for="web_url">Enter url</label>
                                         </div>
                                         <div class="col l2 s2 center">
                                             <!--<a href="#SavePinModal" class="modal-trigger btn btn_style modal-action modal-close">Next</a>-->
                                             <a class="pin_save_btn" ng-click="CheckNextStatus();">Next</a>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="col l12 m12 s12 device_pin_div" style="display: none;">
                         <div class="row no-space">
                             <div class="col l12 m12 s12">
                                 <div class="card-panel">
                                     <div class="row">
                                         <div class="col l12 s12"><h5 class="no-space">Upload a Pin</h5></div>
                                         <div class="input-field col s12">
                                             <input type="file" id="composePinImage"  onchange="angular.element(this).scope().CheckStatus()" class="dropify" data-default-file="" />
                                         </div>
                                         <div class="input-field col l12 s12">
                                             <!--<a  href="#SavePinModal" class="modal-trigger btn btn_style right modal-action modal-close">Next</a>-->
                                             <a class="pin_save_btn" ng-click="CheckNextStatusBrowse();">Next</a>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

         <!-- SavePinModal  -->
         <div id="SavePinModal" class="modal" style="width: 600px;">
             <div class="modal-content">
                 <div class="row no-space">
                     <div class="col l6 s12 center">
                         <div class="margin-top-30">
                             <img src="https://s-media-cache-ak0.pinimg.com/236x/29/e4/62/29e46244a4e361f225eca086d451f28e.jpg" class="responsive-img">
                             <input type="text" id="pinboard" placeholder="Type something for this pin" contenteditable="true"></input>
                         </div>
                     </div>
                     <div class="col l6 s12">
                         <h5>Choose board<a href="javascript:void(0)" class="modal-action modal-close waves-effect waves-pink btn-flat right"><i class="icon-close"></i></a></h5>
                         <div class="board_pin_scroll">
                             <ul class="collection with-header">
                                 <li class="collection-header"><h6>All Boards</h6></li>
                                 <li ng-repeat="boards in lstpin.lstMongoPinterestUserBoards" class="collection-item"><div>{{boards.boardname}}<span class="pin_save_btn"><a id="pinbtn_{{boards.boardid}}" ng-click="CreatePin(boards.pinterestUserId, boards.boardid)" class="modal-action  white-text"><i class="icon-pin"></i> save</a></span></div></li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".device_pin").click(function () {
                $(".web_pin_div").hide();
                $(".web_pin").removeClass('activeButton');
                $(".device_pin_div").show();
                $(".device_pin").addClass('activeButton');
            });
            $(".web_pin").click(function () {
                $(".device_pin_div").hide();
                $(".device_pin").removeClass('activeButton');
                $(".web_pin_div").show();
                $(".web_pin").addClass('activeButton');
            });
        });
    </script>