% rebase('base.html', title=f"{channel.display_name}")
<div style="display: grid; grid-template-columns: 100px 1fr; gap: 10px;">
    <div>
        <a href="/u/{{channel.login}}"><img src="{{channel.profile_image_url}}" width="100%"></a>
    </div>
    <div style="display: grid; grid-template-rows: 50px 50px;">
        <div>
            <span class="channel_name"><b>{{channel.display_name}}</b> - {{channel.broadcaster_type}}
                <div class="channel_links" style="display: inline-flex; position: relative;">
                    <a href="javascript: void(0)"
                        onclick="popup('https://www.twitch.tv/popout/{{channel.login}}/chat?popout=', {{chat_params}})">
                        <i class="gg-comment"></i>
                    </a>
                    <a href="https://twitch.tv/{{channel.login}}/about" target="_blank"><i
                            class="gg-arrow-top-right-r"></i></a>
                </div>
            </span>
        </div>
        <div>
            <p>{{channel.description}}</p>
        </div>
    </div>
</div>
% if defined('stream') and stream:
<div class="card">
    <div class="card-mid">
        <div class="thumbnail">
            <a href="/watch?type=streaming&name={{stream.user_name}}&url=twitch.tv/{{stream.user_login}}"><img
                    src="{{stream.thumbnail_url}}"></a>
            <div class="bl">
                <i class="gg-time"></i>
                <b>{{stream.uptime}}</b>
            </div>
            <div class="br">
                <i class="gg-user" style="color: #ff496c;"></i>
                <b>{{stream.viewer_count}}</b>
            </div>
            <div class="c" style="--ggs: 5">
                <i class="gg-play-button"></i>
            </div>
        </div>
    </div>
    <div class="card-bottom">
        <div class="box_art"><a href="/c/{{stream.game_id}}"><img src="{{stream.box_art_url}}" width="75"></a></div>
        <div class="text_info">
            <div class="vid_title long" title="{{stream.title}}" style="font-size: small;">{{stream.title}}</div>
            <div class="game_name long"><b>{{stream.game_name}}</b></div>
        </div>
    </div>
</div>
% end
<br><br>
<a href="/u/{{channel.login}}/vods?vod_type=archive"><button class="button"
        style="--text-color: rgb(163, 7, 224);"><b>Vods</b></button></a>
<a href="/u/{{channel.login}}/vods?vod_type=highlight"><button class="button"
        style="--text-color: rgb(163, 7, 224);"><b>Highlights</b></button></a>

<br><br>
<form action="/u/{{channel.login}}/clips" method="get" id="clips">
    <button class="button" name="clips" value="range" style="--text-color: rgb(163, 7, 224);"><b>View Clips</b></button>
    <label for="started_at">From</label>
    <input class="setting" style="width: auto;" type="date" id="started_at" name="started_at" required>
    <label for="ended_at">To</label>
    <input class="setting" style="width: auto;" type="date" id="ended_at" name="ended_at" required>
</form>
<br>
% if defined('vods'):
<div class="card-grid">
    % for vod in vods:
    <div class="card">
        <p title="{{vod.title}}">{{vod.title}}</p>
        <div class="card-mid">
            <div class="thumbnail">
                <a href="/watch?type=vod&name={{vod.user_name}}&url={{vod.url}}"><img src="{{vod.thumbnail_url}}"
                        alt="" /></a>
                <div class="tr">
                    <i class="gg-calendar-dates"></i>
                    <b>{{vod.created_at}}</b>
                </div>
                <div class="bl">
                    <i class="gg-time"></i>
                    <b>{{vod.duration}}</b>
                </div>
                <div class="br">
                    <i class="gg-eye"></i>
                    <b>{{vod.view_count}}</b>
                </div>
                <div class="c" style="--ggs: 5">
                    <i class="gg-play-button"></i>
                </div>
            </div>
        </div>
    </div>
    % end
</div>

<br>
<a href="/u/{{channel.login}}/vods?vod_type={{vod_type}}&before={{pagination}}"><button
        class="button"><b>Previous</b></button></a>
<a href="/u/{{channel.login}}/vods?vod_type={{vod_type}}&after={{pagination}}"><button
        class="button"><b>Next</b></button></a>
% end

% if defined('clips'):
<div class="card-grid">
    % for clip in clips:
    <div class="card">
        <p title="{{clip.title}}">{{clip.title}}</p>
        <div class="card-mid">
            <div class="thumbnail">
                <a href="/watch?type=clip&name={{channel.display_name}}&url={{clip.url}}">
                    <img src="{{clip.thumbnail_url}}" alt="">
                </a>
                <div class="tr">
                    <i class="gg-calendar-dates"></i>
                    <b>{{clip.time_since}}</b>
                </div>
                <div class="bl">
                    <i class="gg-time"></i>
                    <b>{{clip.duration}}s</b>
                </div>
                <div class="br">
                    <i class="gg-eye"></i>
                    <b>{{clip.view_count}}</b>
                </div>
                <div class="c" style="--ggs: 5">
                    <i class="gg-play-button"></i>
                </div>
            </div>
        </div>
        <div class="card-bottom">
            % if clip.game_id:
            <div class="box_art"><a href="/c/{{clip.game_id}}"><img src="{{clip.box_art_url}}" width="75"></a></div>
            % end
            <div class="text_info">
                <div class="vid_title"></div>
                <div class="game_name long"><b>{{clip.game_name}}</b></div>
                % if clip.vod_link:
                <div class="vod_button">
                    <a href="/watch?type=clip&name={{channel.display_name}}&url={{clip.vod_link}}"><button
                            class="button"><b>VOD</b></button></a>
                </div>
                % end
            </div>

        </div>
    </div>
    % end
</div>

<br>
<button onclick="history.back()" class="button"><b>Previous</b></button>
<a href="/u/{{channel.login}}/clips?started_at={{started_at}}&ended_at={{ended_at}}&after={{pagination}}"><button
        class="button"><b>Next</b></button></a>
% end