<div class="resource-details album-details">
    <header layout="row" layout-xs="column">
        <div class="blurred-background" style="background-image: url('{{album.covers.normal}}');"></div>
        <div layout="row" layout-xs="column" flex>
            <div flex="50" flex-xs="100" class="info">
                <h1>{{::album.title}}</h1>
                <h2>
                    by: <a ng-href="{{::album.user.url}}">{{::album.user.name}}</a>
                </h2>
            </div>

            <div class="buttons" layout="row" layout-align="end top" layout-align-xs="center center" flex="50" flex-xs="100">
                <md-menu>
                    <md-button class="md-icon-button" aria-label="Download" ng-click="$mdOpenMenu($event)" ng-hide="album.is_downloadable == 0">
                        <md-tooltip md-direction="bottom" md-delay="200">Download</md-tooltip>
                        <md-icon>file_download</md-icon>
                    </md-button>

                    <md-menu-content>
                        <md-menu-item ng-repeat="format in ::album.formats" ng-hide="isInProgress">
                            <md-button target="_blank" ng-if="::!format.isCacheable" ng-href="{{::format.url}}">
                                {{::format.name}} ({{::format.size}})
                            </md-button>
                            <md-button ng-if="format.isCacheable" ng-click="getCachedAlbum(album.id, format);" href="">
                                {{::format.name}} ({{::format.size}})
                            </md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>

                <pfm-favourite-button resource="::album" type="album"></pfm-favourite-button>

                <md-button class="md-icon-button" aria-label="Share or embed" ng-click="share()">
                    <md-tooltip md-direction="bottom" md-delay="200">Share or embed</md-tooltip>
                    <md-icon>share</md-icon>
                </md-button>

                <md-button class="md-icon-button" aria-label="Edit" ng-show="::album.permissions.edit" ui-sref="content.artist.account.albums.edit(::{slug: album.user.slug, album_id: album.id})">
                    <md-tooltip md-direction="bottom" md-delay="200">Edit</md-tooltip>
                    <md-icon>edit</md-icon>
                </md-button>
            </div>
        </div>
    </header>

    <div class="stretch-to-bottom details-columns">
        <div class="right">
            <img class="cover" pfm-src-loader="::album.covers.normal" pfm-src-size="normal" />

            <div class="share-buttons" pfm-share-buttons>
                <a class="tumblr" ng-href="{{::album.share.tumblrUrl}}" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:20px; height:20px; background:url('/images/tumblr-share.png') top left no-repeat transparent;"></a>
                <div class="facebook fb-like" data-href="{{::album.url}}" data-width="450" data-layout="button_count" data-show-faces="true" data-send="false"></div>
                <iframe class="twitter" allowtransparency="true" frameborder="0" scrolling="no" ng-src="{{::album.share.twitterUrl}}" style="width:130px; height:20px;"></iframe>
            </div>

            <ul class="stats">
                <li>Published: <strong>{{::album.created_at | date:'medium'}}</strong></li>
                <li>Views: <strong>{{::album.stats.views}}</strong></li>
                <li>Downloads: <strong>{{::album.stats.downloads}}</strong></li>
                <li>Favourites: <strong>{{::album.stats.favourites}}</strong></li>
            </ul>
        </div>

        <div class="left">
            <div class="description" ng-show="::album.description.length">
                <h2>Description</h2>
                <p marked="::album.description"></p>
            </div>

            <h2>Tracks</h2>
            <pfm-tracks-list tracks="::album.tracks" class="condensed no-artist"></pfm-tracks-list>

            <pfm-comments type="album" resource="::album"></pfm-comments>
        </div>
    </div>
</div>