{% extends "admin/dj_doom_panel/base.html" %}
{% load i18n static %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="https://v8.js-dos.com/latest/js-dos.css">
{% endblock %}

{% block panel_content %}

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon dcr-icon-color--danger">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <circle cx="12" cy="12" r="6"/>
        <circle cx="12" cy="12" r="2"/>
        <line x1="12" y1="2" x2="12" y2="6"/>
        <line x1="12" y1="18" x2="12" y2="22"/>
        <line x1="2" y1="12" x2="6" y2="12"/>
        <line x1="18" y1="12" x2="22" y2="12"/>
      </svg>
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">{% trans "DOOM" %}</h1>
      </div>
      <p class="dcr-page-header__subtitle">{% trans "Play DOOM in your admin" %}</p>
    </div>
  </div>
</div>

<div class="dcr-card">
  <div class="dcr-card__body dcr-card__body--flush">
    <div id="dos"></div>
  </div>
</div>

<p class="doom-attribution">
  Powered by <a href="https://js-dos.com" target="_blank" rel="noopener">js-dos</a> &middot;
  DOOM shareware &copy; id Software LLC; freely distributable
</p>

<script src="https://v8.js-dos.com/latest/js-dos.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    Dos(document.getElementById("dos"), {
      url: "{% static 'dj_doom_panel/doom-shareware.jsdos' %}",
      kiosk: true,
      noCloud: true,
      renderAspect: "4/3",
    });
  });
</script>

{% endblock %}