<ion-view id="feed-view" ng-controller="FeedCtrl" ng-init="feedInit()">
    <ion-content on-release="onRelease()" scroll="true" padding="true">

        <!-- PULL TO REFRESH -->
        <div align="center" id="feed-pull-refresh">
            <img id="img-feed-pull-refresh" src="img/icons/update-arrow-gray-low.png">
            <br>
            <p>
                Pull to Refresh
            </p>
        </div>

        <!-- Item Template -->
        <div class="feed-item animated fadeIn" ng-repeat="feedItem in feedItems">
            <!-- Header -->
            <div class="item-header">
                <!-- Local Logo -->
                <div class="local-logo">
                    <div style="background-image: url('https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfa1/v/t1.0-1/p160x160/10991326_816678351731813_4193250758949248118_n.png?oh=abdedb0e9e850b5db27d7ef94254ae0f&oe=55886798&__gda__=1430914065_512d0ca043b56645eb4c6da070e11129');"></div>
                </div>
                
                <!-- Local Data -->
                <div class="local-data">
                    <p>
                        <span class="local-name">{{feedItem.displayName}}</span>
                        <br>
                        <span class="local-map"><img style="width: 9px;" src="img/icons/map_blank.png"> Local</span>
                    </p>
                </div>

                <!-- Event When -->
                <div class="event-when">
                    <p>Tonight</p>
                </div>
            </div>
            <div class="clearfix"></div>

            <!-- FLYER -->
            <div class="event-flyer">
                <div style="background-image: url('https://scontent-lga.xx.fbcdn.net/hphotos-xtp1/v/t1.0-9/1908397_838686322864349_2498385847952523477_n.jpg?oh=dedd57eb509ce9f87e12de40cb0349b2&oe=55AB0435');"></div>
            </div>
        </div>

        <!-- LOAD MORE -->
        <div align="center" id="feed-load-more">
            <img style="width: 30px;" src="img/loading1.gif">
        </div>

    </ion-content>
</ion-view>

<style>
#feed-view {

}

#feed-pull-refresh {
    display: none;
}

#feed-pull-refresh p {
    font-size: 11px;
    color: gray;
}

#img-feed-pull-refresh {
    width: 15px;
}

.feed-item {
    margin-bottom: 15px;
}

.feed-item .item-header {
    z-index: 2;
    height: 50px;
}

.local-logo {
    float: left;
    padding-top: 11px;
}

.local-logo div {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    box-shadow: 2px 5px 20px #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.local-name {
    color: #CCA731;
}

.local-data {
    float: left;
    margin-left: 10px;
    padding-top: 5px;
    max-width: 65%;
}

.event-when {
    float: right;
    padding-top: 11px;
}

.local-map, .event-when {
    color: white;
}

.event-flyer {
    margin-top: -15px;
}

.event-flyer div {
    width: 100%;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0px 0px 140px 20px #000;
}

#feed-load-more {
    display: none;
}
</style>