{% extends "base.html" %}
{% load bootstrap4 %}
{% load widget_tweaks %}

{% block title %}Client - Training Materials{% endblock title %}

{% block content %}
<br><br>
<style>
    video::-internal-media-controls-download-button {
        display:none;
    }
    
    video::-webkit-media-controls-enclosure {
        overflow:hidden;
    }
    
    video::-webkit-media-controls-panel {
        width: calc(100% + 30px); /* Adjust as needed */
    }
</style>
<section class="page-section" id="services">
    <div class="container">
        {% include "client_navbar.html" %}
        <h4>List of Materials</h4>
        {% for material in materials%}
        <div class="row">
            <div class="col-3">{{material.name}}</div>
            <div class="col-4">{{material.description}}</div>
            <div class="col-1">{{material.type}}</div>
        </div>
        <div class="row">
            <div class="col-12">
                {%if material.file %}
                    {% if material.type == "1"%} <!--PDF-->
                    <div id="pdf">
                        <object oncontextmenu="return false;" id="my-video-player" width="100%" height="650" type="application/pdf" data="{{material.file.url}}#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content" style="pointer-events: none;">
                            <p>PDF cannot be displayed.</p>
                        </object>
                    </div>
                    {% elif material.type == "2"%} <!--PPT-->
                    <div id="ppt">
                        <iframe src='https://view.officeapps.live.com/op/view.aspx?src={{ request.META.HTTP_HOST }}{{material.file.url}}' width='100%' height='600px' frameborder='0'></iframe>
                    </div>
                    {% else %} <!--VIDEO-->
                    <div id="video">
                        <video oncontextmenu="return false;" id="my-video-player" width="512" height="380" controls controlsList="nodownload">
                            <source src="{{material.file.url}}" type="video/mp4">
                            Your browser does not support HTML5 video.
                        </video>
                    </div>
                    {%endif%}
                {%endif%}
            </div>
        </div>
        {%endfor%}
    </div>
</section>
{% endblock content %}