#import sickbeard
#import datetime
#import re
#import os.path
#from sickbeard.common import *
#from sickbeard import sbdatetime
#from sickbeard.helpers import anon_url

<script type="text/javascript" charset="utf-8">
<!--

\$(document).ready(function(){
    // initialise combos for dirty page refreshes
    \$('#showsort').val('original');
    \$('#showsortdirection').val('asc');

    var \$container = [\$('#container')];
    jQuery.each(\$container, function (j) {
        this.isotope({
            itemSelector: '.trakt_show',
            sortBy: 'original-order',
            layoutMode: 'fitRows',
            getSortData: {
                name: function( itemElem ) {
                    var name = \$( itemElem ).attr('data-name') || '';
#if not $sickbeard.SORT_ARTICLE:
                    name = name.replace(/^(The|A|An)\s/i, '');
#end if
                    return name.toLowerCase();
                },
                rating: '[data-rating] parseInt',
                votes: '[data-votes] parseInt',
            }
        });
    });

    \$('#showsort').on( 'change', function() {
        var sortCriteria;
        switch (this.value) {
            case 'original':
                sortCriteria = 'original-order'
                break;
            case 'rating':
                /* randomise, else the rating_votes can already
                 * have sorted leaving this with nothing to do.
                 */
                \$('#container').isotope({sortBy: 'random'});
                sortCriteria = 'rating';
                break;
            case 'rating_votes':
                sortCriteria = ['rating', 'votes'];
                break;
            case 'votes':
                sortCriteria = 'votes';
                break;
            default:
                sortCriteria = 'name'
                break;
        }
        \$('#container').isotope({sortBy: sortCriteria});
    });

    \$('#showsortdirection').on( 'change', function() {
        \$('#container').isotope({sortAscending: ('asc' == this.value)});
    });
});

//-->
</script>

<div id="container">
#if not $trending_shows
	<div class="trakt_show" style="width:100%; margin-top:20px">
		<p class="red-text">Trakt API did not return any results, please check your config.
	</div>
#else
#for $cur_show in $trending_shows:
    #set $image = re.sub(r'(?im)(.*)(\..*?)$', r'\1-300\2', $cur_show['images']['poster'], 0)

    <div class="trakt_show" data-name="$cur_show['title']" data-rating="$cur_show['ratings']['percentage']" data-votes="$cur_show['ratings']['votes']">
        <div class="traktContainer">
            <div class="trakt-image">
                <a class="trakt-image" href="<%= anon_url(cur_show['url']) %>" target="_blank"><img alt="" class="trakt-image" src="${image}" /></a>
            </div>

            <div class="show-title">
                <%= (cur_show['title'], '<span>&nbsp;</span>')[ '' == cur_show['title']] %>
            </div>

        <div class="clearfix">
            <p>$cur_show['ratings']['percentage']% <img src="$sbRoot/images/heart.png"></p>
            <i>$cur_show['ratings']['votes'] votes</i>

            <div class="traktShowTitleIcons">
                <a href="$sbRoot/home/addShows/addTraktShow?indexer_id=${cur_show['tvdb_id'] or cur_show['tvrage_id']}&amp;showName=${cur_show['title']}" class="btn btn-xs">Add Show</a>
            </div>
        </div>
        </div>
    </div>
#end for
#end if
</div>