{%- block extrahead %}
    <link rel="stylesheet" href="assets/style-player.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <script src="assets/bundle.js"></script>
    <meta charset="UTF-8">

{% endblock %}

{%- block content %}

<div id="player-header" class="player-header">
  <div id="toc-toggle" class="content-toggle">
    <i class="bi bi-list-task"></i>
    <p id="content-text">{{ _('Content')}}</p>
  </div>
  <div class="content-title">
    <div id="course-title" class="course-title"></div>
    <div id="lecture-title-header" class="lecture-title-header"></div>
  </div>
  <div>
    <div id="font-size" class="content-options">
      <i class="bi bi-fonts"></i>
      <span id="font-text" class="no-select">  {{_('Font')}} </span>
    </div>
    <div id="font-size-modal" class="font-picker hide-element">
      <button class="no-select" id="smaller-text">-</button>
      <button class="no-select" id="larger-text">+</button>
    </div>
  </div>
</div>
<div id="content-nav" class="content-nav"> 
  <ul id="toc" class="table-of-content no-select">
  </ul>
  <div class="nav-buttons">
    <button id="previous-activity"><i class="bi bi-chevron-left"></i> </button>
    <button id="next-activity"> <i class="bi bi-chevron-right"></i></i> </button>
  </div>
</div>
  <div id="main" class="main-content">
    <div id="course-content" class="course-content">
      <iframe id="main-iframe" class="content-iframe" data-content-url=""></iframe>
    </div>
  </div>
{%- endblock %}