{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}

{% block head %}
<title>{{sysSettings.siteName}}</title>
<meta name="twitter:card" content="app" />
<meta property="og:site_name" content="{{sysSettings.siteName}}" />
<meta property="og:title" content="{{sysSettings.siteName}}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{request.url|normalize_url}}" />
<meta property="og:image" content="{{request.url_root|normalize_urlroot}}/{{sysSettings.systemLogo}}" />
{% endblock %}

{% block body %}
<div class="container-fluid p-2" id="index-live-container">
    {% if sysSettings.serverMessage != "" and sysSettings.serverMessage != None %}
    <div class="jumbotron shadow mt-2 p-3">
        <div class="row p-2">
            <div>
                <h2 class="display-5"><b>{{sysSettings.serverMessageTitle}}</b></h2>
            </div>
        </div>
        <div class="row p-2">
            <div>
                {{sysSettings.serverMessage|markdown}}
            </div>
        </div>
    </div>
    {% endif %}
    <div class="row m-2">
        <div class="index-live-title"><b>Live Now</b></div>
    </div>
    <div class="row mx-2">
        <div class="col-lg col-xs-12 col-sm-12">

            <div class="d-flex flex-wrap justify-content-between">
                {% if streamList == [] %}
                No Live Streams Online...
                {% endif %}
                {% for stream in streamList %}
                <div class="video-card bg-dark mb-3" style="max-width: 45rem;">
                    <div class="row no-gutters">
                        <div class="video-card-header">
                            <a href="/view/{{stream.channel.channelLoc}}/">
                                <img class="shadow gif lazy" {% if stream.channel.protected and sysSettings.protectionEnabled %} src="/static/img/video-locked.jpg" onerror="this.src='/static/img/video-locked.jpg';" {% else %} src="/static/img/video-placeholder.jpg"
                                    onerror="this.src='/static/img/video-locked.jpg';" {% endif %} width="100%" data-src="/stream-thumb/{{stream.channel.channelLoc}}.png"></a>
                        </div>
                        <div class="video-card-body ml-3">
                            <b><i class="px-2 fas fa-tv"></i></b><span class="video-title"><a href="/view/{{stream.channel.channelLoc}}/"><b>{{stream.streamName|limit_title}}</b></a></span><br />
                            <b><i class="px-2 fas fa-podcast "></i></b><a href="/channel/{{stream.channel.id}}/"> {{stream.channel.channelName}}</a>
                            <span class="float-right"><span class="ml-4 px-2 badge badge-danger">Live</span>{% if stream.channel.protected and sysSettings.protectionEnabled %}<span class="badge badge-info ml-2"><i class="fas fa-user-lock"></i> Protected</span>{% endif %}</span><br />
                            <b><i class="px-2 fas fa-hashtag"></i></b><a href="/topic/{{stream.topic}}/"> {{stream.topic|get_topicName}}<br></a>
                            <span class="px-2 flex-fill"><i class="fas fa-thumbs-up"></i> {{stream.id|get_Stream_Upvotes}}</span>
                            <span class="px-2 flex-fill"><i class="fas fa-eye"></i> {{stream.currentViewers}}</span>
                            <span class="px-2 flex-fill"><i class="fas fa-users"></i> {{stream.totalViewers}}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<hr>
<div class="container-fluid p-2" id="index-videos-container">
    <div class="row m-2">
        <div class="index-video-title"><b>Videos</b></div>
    </div>
    <div class="row mx-2">
        <div class="col-lg col-xs-12 col-sm-12">
            <div class="d-flex flex-wrap justify-content-start">
                {% for video in videoList %}
                <div class="video-card bg-dark mx-4" style="max-width: 20rem;">
                    <div class="video-card-header">
                        <a href="/play/{{video.id}}">
                            <img class="shadow {% if video.gifLocation != None %}gif{% endif %} lazy" {% if video.protected and sysSettings.protectionEnabled %} src="/static/img/video-locked.jpg" onerror="this.src='/static/img/video-locked.jpg';" {% else %} src="/static/img/video-placeholder.jpg"
                                onerror="this.src='/static/img/video-placeholder.jpg';" {% endif %} width="100%" data-src="/videos/{{video.thumbnailLocation}}">
                        </a>
                    </div>
                    <div class="video-card-body">
                        <i class="fas fa-tv mr-2"></i><span class="video-title"><a href="/play/{{video.id}}"><b> {{video.channelName|limit_title}}</b></a></span><br />
                        {% if video.protected and sysSettings.protectionEnabled %}<span class="float-right"><span class="badge badge-info"><i class="fas fa-user-lock"></i> Protected</span></span>{% endif %}<br />
                        <i class="fas fa-podcast mr-2"></i> {{video.ChanName}}
                        <span class="float-right"><i class="fas fa-calendar-alt mr-2"></i> {{video.videoDate|normalize_date}}</span><br />
                        <i class="fas fa-user mr-2"></i><a href="/streamer/{{video.owningUser}}"> {{video.owningUser|get_userName}}</a>
                        <span class="float-right"><i class="fas fa-hashtag mr-2"></i><a href="/topic/{{video.topic}}/"> {{video.topic|get_topicName}}</a></span><br />
                        <i class="fas fa-thumbs-up mr-2"></i> {{video.id|get_Video_Upvotes}}</span>
                        <i class="fas fa-eye mx-2"></i> {{video.views}}</span>
                        <i class="fas fa-comments mx-2"></i> {{video.id|get_Video_Comments}}</span>
                        <span class="float-right"><i class="fas fa-clock mr-2"></i> {{video.length|hms_format}}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<div class="container-fluid p-2" id="index-videos-container">
    <div class="row m-2">
        <div class="index-video-title"><b>Clips</b></div>
    </div>
    <div class="row mx-2">
        <div class="col-lg col-xs-12 col-sm-12">
            <div class="d-flex flex-wrap justify-content-start">
                {% for clip in clipList %}
                <div class="video-card bg-dark mx-4" style="max-width: 20rem;">
                    <div class="video-card-header">
                        <a href="/clip/{{clip.id}}">
                            <img class="shadow {% if clip.gifLocation != None %}gif{% endif %} lazy" src="/static/img/video-placeholder.jpg" width="100%" data-src="/videos/{{clip.thumbnailLocation}}" onerror="this.src='/static/img/video-placeholder.jpg';">
                        </a>
                    </div>
                    <div class="video-card-body">
                        <i class="fas fa-tv mr-2"></i><span class="video-title"><a href="/clip/{{clip.id}}"><b> {{clip.clipName|limit_title}}</b></a></span><br />
                        <span class="float-right"><span class="badge badge-secondary ml-2"><i class="fas fa-user-lock"></i> Clip</span></span>{% if clip.protected and sysSettings.protectionEnabled %}<span class="float-right"><span class="badge badge-info"><i
                                    class="fas fa-user-lock"></i> Protected</span></span>{% endif %}<br />
                        <i class="fas fa-podcast mr-2"></i> {{clip.channelName}}</a>
                        <span class="float-right"><i class="fas fa-calendar-alt mr-2"></i> {{clip.videoDate|normalize_date}}</span><br />
                        <i class="fas fa-user mr-2"></i><a href="/streamer/{{clip.owningUser}}"> {{clip.owningUser|get_userName}}</a>
                        <span class="float-right"><i class="fas fa-hashtag mr-2"></i><a href="/topic/{{clip.topic}}/"> {{clip.topic|get_topicName}}</a></span><br />
                        <i class="fas fa-thumbs-up mr-2"></i> {{clip.id|get_Clip_Upvotes}}</span>
                        <i class="fas fa-eye mx-2"></i> {{clip.views}}</span>
                        <span class="float-right"><i class="fas fa-clock mr-2"></i> {{clip.length|hms_format}}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

{% endblock %}