<%doc>
USAGE DOCUMENTATION :: PLEASE LEAVE THIS AT THE TOP OF THIS FILE

For Mako templating syntax documentation please visit: http://docs.makotemplates.org/en/latest/

Filename:           info_children_list.html
Version:            0.1
Variable names:     data [list]

data :: Usable parameters

== Global keys ==
children_type           Returns the type of children in the array.
children_count          Returns the number of episodes in the array.
children_list           Returns an array of episodes.

data['children_list'] :: Usable paramaters

== Global keys ==
rating_key              Returns the unique identifier for the media item.
media_index             Returns the episode number.
title                   Returns the name of the episode.
thumb                   Returns the location of the item's thumbnail. Use with pms_image_proxy.
parent_thumb            Returns the location of the item's parent thumbnail. Use with pms_image_proxy.

DOCUMENTATION :: END
</%doc>

% if data != None:
<%
    from plexpy.helpers import cast_to_int, page, short_season
%>
% if data['children_count'] > 0:
<div class="item-children-wrapper">
    <% max_height ='max-height' if data['children_type'] in ('track', 'photo') or media_type == 'playlist' else '' %>
    <ul class="item-children-instance ${max_height} list-unstyled">
        % for child in data['children_list']:
        % if child['rating_key']:
        % if data['children_type'] in ('track', 'photo') or media_type == 'playlist':
        <li class="item-children-list-item">
        % else:
        <li>
        % endif
            % if media_type == 'playlist':
                <% e = 'even' if loop.index % 2 == 0 else 'odd' %>
                <div class="item-children-list-item-${e}">
                    <span class="item-children-list-item-index">${loop.index + 1}</span>
                    <span class="item-children-list-item-title">
                        % if child['media_type'] == 'movie':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Movie"><i class="fa fa-film fa-fw"></i></span>
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 450, fallback='poster')}" data-height="120" data-width="80">
                                ${child['title']}
                            </span>
                        </a>
                        <span class="text-muted"> (${child['year']})</span>
                        % elif child['media_type'] == 'episode':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Episode"><i class="fa fa-television fa-fw"></i></span>
                        <a href="${page('info', child['grandparent_rating_key'])}" title="${child['grandparent_title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['grandparent_thumb'], child['grandparent_rating_key'], 300, 450, fallback='poster')}" data-height="120" data-width="80">
                                ${child['grandparent_title']}
                            </span>
                        </a> -
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['parent_thumb'], child['parent_rating_key'], 300, 450, fallback='poster')}" data-height="120" data-width="80">
                                ${child['title']}
                            </span>
                        </a>
                        <span class="text-muted"> (<a class="no-highlight" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${short_season(child['parent_title'])}</a> &middot; <a class="no-highlight" href="${page('info', child['rating_key'])}" title="${child['title']}">E${child['media_index']}</a>)</span>
                        % elif child['media_type'] == 'track':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Track"><i class="fa fa-music fa-fw"></i></span>
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['parent_thumb'], child['parent_rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['title']}
                            </span>
                        </a> -
                        <a href="${page('info', child['grandparent_rating_key'])}" title="${child['grandparent_title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['grandparent_thumb'], child['grandparent_rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['grandparent_title']}
                            </span>
                        </a>
                        <span class="text-muted"> (<a class="no-highlight" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${child['parent_title']}</a>)</span>
                        % elif child['media_type'] == 'photo':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Photo"><i class="fa fa-picture-o fa-fw"></i></span>
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['title']}
                            </span>
                        </a>
                            % if child['grandparent_title']:
                            - <a href="${page('info', child['grandparent_rating_key'])}" title="${child['grandparent_title']}">
                                <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['grandparent_thumb'], child['grandparent_rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                    ${child['grandparent_title']}
                                </span>
                            </a>
                            % endif
                        <span class="text-muted"> (<a class="no-highlight" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${child['parent_title']}</a>)</span>
                        % elif child['media_type'] == 'clip':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Video"><i class="fa fa-video-camera fa-fw"></i></span>
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['title']}
                            </span>
                        </a>
                        <span class="text-muted"> (<a class="no-highlight" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${child['parent_title']}</a>)</span>
                        % endif
                    </span>
                    % if child['duration']:
                    <span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
                        <% f = 'h:mm:ss' if cast_to_int(child['duration']) >= 3600000 else 'm:ss' %>
                        <script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("${f}"));</script>
                    </span>
                    % endif
                </div>
            % elif child['media_type'] == 'movie':
            <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                <div class="item-children-poster">
                    <div class="item-children-poster-face poster-item" style="background-image: url(${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 450, fallback='poster')});"></div>
                    % if _session['user_group'] == 'admin':
                    <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
                    % endif
                </div>
            </a>
            <div class="item-children-instance-text-wrapper poster-item">
                <h3>
                     <a href="${page('info', child['rating_key'])}" title="${child['title']}">${child['title']}</a>
                </h3>
                <h3 class="text-muted">${child['year']}</h3>
            </div>
            % elif child['media_type'] == 'show':
            <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                <div class="item-children-poster">
                    <div class="item-children-poster-face poster-item" style="background-image: url(${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 450, fallback='poster')});"></div>
                    % if _session['user_group'] == 'admin':
                    <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
                    % endif
                </div>
            </a>
            <div class="item-children-instance-text-wrapper poster-item">
                <h3>
                     <a href="${page('info', child['rating_key'])}" title="${child['title']}">${child['title']}</a>
                </h3>
            </div>
            % elif child['media_type'] == 'season':
            <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                <div class="item-children-poster">
                    % if child['thumb']:
                    <div class="item-children-poster-face poster-item" style="background-image: url(${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 450, fallback='poster')});">
                    % else:
                    <div class="item-children-poster-face poster-item" style="background-image: url(${page('pms_image_proxy', child['parent_thumb'], child['parent_rating_key'], 300, 450, fallback='poster')});">
                    % endif
                        <div class="item-children-card-overlay">
                            <div class="item-children-overlay-text">
                                ${child['title']}
                            </div>
                        </div>
                    </div>
                    % if _session['user_group'] == 'admin':
                    <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
                    % endif
                </div>
            </a>
            <div class="item-children-instance-text-wrapper poster-item">
                <h3>
                     <a href="${page('info', child['rating_key'])}" title="${child['title']}">${child['title']}</a>
                </h3>
                % if media_type == 'collection':
                <h3 class="text-muted">
                    <a class="text-muted" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${child['parent_title']}</a>
                </h3>
                % endif
            </div>
            % elif child['media_type'] == 'episode':
            <a href="${page('info', child['rating_key'])}" title="Episode ${child['media_index']}">
                <div class="item-children-poster">
                    <div class="item-children-poster-face episode-item" style="background-image: url(${page('pms_image_proxy', child['thumb'], child['rating_key'], 500, 280, fallback='art')});">
                        <div class="item-children-card-overlay">
                            <div class="item-children-overlay-text">
                                Episode ${child['media_index'] or child['originally_available_at']}
                            </div>
                        </div>
                    </div>
                    % if _session['user_group'] == 'admin':
                    <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
                    % endif
                </div>
            </a>
            <div class="item-children-instance-text-wrapper episode-item">
                <h3>
                     <a href="${page('info', child['rating_key'])}" title="${child['title']}">${child['title']}</a>
                </h3>
                % if media_type == 'collection':
                <h3 class="text-muted">
                    <a href="${page('info', child['grandparent_rating_key'])}" title="${child['grandparent_title']}">${child['grandparent_title']}</a>
                </h3>
                <h3 class="text-muted">
                    <a href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${short_season(child['parent_title'])}</a>
                        &middot; <a href="${page('info', child['rating_key'])}" title="Episode ${child['media_index']}">E${child['media_index']}</a>
                </h3>
                % endif
            </div>
            % elif child['media_type'] == 'artist':
            <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                <div class="item-children-poster">
                    <div class="item-children-poster-face cover-item" style="background-image: url(${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 300, fallback='cover')});"></div>
                    % if _session['user_group'] == 'admin':
                    <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
                    % endif
                </div>
            </a>
            <div class="item-children-instance-text-wrapper cover-item">
                <h3>
                    <a href="${page('info', child['rating_key'])}" title="${child['title']}">${child['title']}</a>
                </h3>
            </div>
            % elif child['media_type'] == 'album':
            <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                <div class="item-children-poster">
                    <div class="item-children-poster-face cover-item" style="background-image: url(${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 300, fallback='cover')});"></div>
                    % if _session['user_group'] == 'admin':
                    <span class="overlay-refresh-image" title="Refresh image"><i class="fa fa-refresh refresh_pms_image"></i></span>
                    % endif
                </div>
            </a>
            <div class="item-children-instance-text-wrapper cover-item">
                <h3>
                    <a href="${page('info', child['rating_key'])}" title="${child['title']}">${child['title']}</a>
                </h3>
                % if media_type == 'collection':
                <h3 class="text-muted">
                    <a class="text-muted" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${child['parent_title']}</a>
                </h3>
                % endif
            </div>
            % elif child['media_type'] == 'track':
                <% e = 'even' if loop.index % 2 == 0 else 'odd' %>
                <div class="item-children-list-item-${e}">
                    <span class="item-children-list-item-index">${child['media_index']}</span>
                    <span class="item-children-list-item-title">
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Track"><i class="fa fa-music fa-fw"></i></span>
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['parent_thumb'], child['parent_rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['title']}
                            </span>
                        </a>
                        % if media_type == 'collection':
                        -
                        <a href="${page('info', child['grandparent_rating_key'])}" title="${child['grandparent_title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['grandparent_thumb'], child['grandparent_rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['grandparent_title']}
                            </span>
                        </a>
                        <span class="text-muted"> (<a class="no-highlight" href="${page('info', child['parent_rating_key'])}" title="${child['parent_title']}">${child['parent_title']}</a>)</span>
                        % elif child['original_title']:
                        <span class="text-muted"> - ${child['original_title']}</span>
                        % endif
                    </span>
                    <span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
                        <% f = 'h:mm:ss' if cast_to_int(child['duration']) >= 3600000 else 'm:ss' %>
                        <script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("${f}"));</script>
                    </span>
                </div>
            % elif child['media_type'] == 'photo':
                <% e = 'even' if loop.index % 2 == 0 else 'odd' %>
                <div class="item-children-list-item-${e}">
                    <span class="item-children-list-item-index">${loop.index + 1}</span>
                    <span class="item-children-list-item-title">
                        % if child['media_type'] == 'photo_album':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Photo"><i class="fa fa-camera fa-fw"></i></span>
                        % elif child['media_type'] == 'clip':
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Photo"><i class="fa fa-video-camera fa-fw"></i></span>
                        % else:
                        <span class="media-type-tooltip" data-toggle="tooltip" title="Photo"><i class="fa fa-picture-o fa-fw"></i></span>
                        % endif
                        <a href="${page('info', child['rating_key'])}" title="${child['title']}">
                            <span class="thumb-tooltip" data-toggle="popover" data-img="${page('pms_image_proxy', child['thumb'], child['rating_key'], 300, 300, fallback='cover')}" data-height="80" data-width="80">
                                ${child['title']}
                            </span>
                        </a>
                    </span>
                    % if child['duration']:
                    <span class="item-children-list-item-duration" id="item-children-list-item-duration-${loop.index + 1}">
                        <% f = 'h:mm:ss' if cast_to_int(child['duration']) >= 3600000 else 'm:ss' %>
                        <script>$('#item-children-list-item-duration-${loop.index + 1}').text(moment.utc(${child['duration']}).format("${f}"));</script>
                    </span>
                    % endif
                </div>
            % endif
        </li>
        % endif
        % endfor
    </ul>
</div>
<script>
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]',
        container: 'body'
    });
    $('body').popover({
        selector: '[data-toggle="popover"]',
        html: true,
        sanitize: false,
        container: 'body',
        trigger: 'hover',
        placement: 'right',
        template: '<div class="popover history-thumbnail-popover" role="tooltip"><div class="arrow" style="top: 50%;"></div><div class="popover-content"></div></div>',
        content: function () {
            return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px; width: ' + $(this).data('width') + 'px;" />';
        }
    });
</script>
% endif
% endif

