{% extends 'game/basenonav.html' %}

{% load static %}
{% load i18n %}
{% load app_tags %}
{% load game.utils %}

{% block scripts %}
{{block.super}}
  <script defer id="data"
    data-path="{{level.path|trim}}"
    data-origin="{{level.origin|trim}}"
    data-destinations="{{level.destinations|trim}}"
    data-traffic-lights="{{level.traffic_lights|trim}}"
    data-cows="{{level.cows|trim}}"
    data-episode="{{level.episode.id|trim}}"
    data-level-id="{{level.id|default_if_none:''|trim}}"
    data-level-name="{{level.name|trim}}"
  >
    var ANONYMOUS = {{level.anonymous|booltojs}}
    var PATH = $('#data').data('path')
    var ORIGIN = $('#data').data('origin')
    var DESTINATIONS = $('#data').data('destinations')
    var DECOR = {{decor|safe}}
    var BACKGROUND_URL = "{{background}}"
    var HOUSE_URL = "{{house}}"
    var CFC_URL = "{{cfc}}"
    var TRAFFIC_LIGHTS = $('#data').data('trafficLights')
    var COWS = $('#data').data('cows')
    var EPISODE = $('#data').data('episode')
    var LEVEL_ID = $('#data').data('levelId')
    var LEVEL_NAME = $('#data').data('levelName')
    var PREV_LEVEL_URL = "{% if prev_level_url %}{{prev_level_url}}{% else %}{% endif %}"
    var NEXT_LEVEL_URL = "{% if next_level_url %}{{next_level_url}}{% else %}{% endif %}"
    var MODEL_SOLUTION = {{model_solution|default:"[]"}}
    var DISABLE_ROUTE_SCORE = {{level.disable_route_score|booltojs}}
    var DISABLE_ALGORITHM_SCORE = {{level.disable_algorithm_score|booltojs}}
    var SUBTITLE = "{{subtitle|escapejs}}"
    var LESSON = "{{lesson|escapejs}}"
    var HINT = "{{hint|escapejs}}"
    var DEFAULT_LEVEL = {{level.default|booltojs}}
    var FUEL_GAUGE =  {{level.fuel_gauge|booltojs}}
    var CHARACTER_NAME = "{{character.name}}"
    var CHARACTER_EN_FACE_URL = "{{character.en_face}}"
    var CHARACTER_URL = "{{character_url}}"
    var CHARACTER_HEIGHT = "{{character_height}}"
    var CHARACTER_WIDTH = "{{character_width}}"
    var WRECKAGE_URL = "{{wreckage_url}}"
    var NIGHT_MODE_FEATURE_ENABLED = {{night_mode_feature_enabled}}
    var NIGHT_MODE = {{night_mode}}
    var FLIP_NIGHT_MODE_URL = "{{flip_night_mode_url|default:""}}"
    var USER_LOGGED_IN = {{request.user.is_authenticated|booltojs}}

    var RANDOM = {{episode.random_levels_enabled|booltojs}}
    var IS_RANDOM_LEVEL = {{random_level|booltojs}}

    var BLOCKS =  []
    var maxInstances = {}
    {% for block in blocks %}
      BLOCKS.push({'type':"{{block.type}}"{% if block.number %}, 'number':{{block.number}} {% endif %}})
      {% if block.number %}
        maxInstances["{{block.type}}"] = {{block.number}}
      {% endif %}
    {% endfor %}

    var BLOCKLY_XML = '<xml id="blockly_toolbox" style="display: none">'
    for (var i = 0; i < BLOCKS.length; i++) {
        BLOCKLY_XML += '<block type="' + BLOCKS[i].type + '"></block>'
    }

    BLOCKLY_XML += '</xml>'
    var MAX_FUEL = {{level.max_fuel}}
    var DIRECT_DRIVE = {{level.direct_drive|booltojs}}
    var NEXT_EPISODE = {% if level.episode.next_episode == None %}null{% else %}"{{level.episode.next_episode.id}}"{% endif %}
    var WORKSPACE = {% if workspace == None %}null{% else %}"{{workspace}}"{% endif %}
    var BLOCKLY_ENABLED = {{level.blocklyEnabled|booltojs}}
    var PYTHON_ENABLED = {{level.pythonEnabled|booltojs}}
    var PYTHON_VIEW_ENABLED = {{level.pythonViewEnabled|booltojs}}
    var RETURN_URL = "{{return_url}}"
    var PYTHON_WORKSPACE = {% if python_workspace == None %}null{% else %}"{{python_workspace|linebreaksbr}}"{% endif %}
  </script>

  <script defer type="text/javascript" src="{% static 'game/js/utils.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt.min.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt-stdlib.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/skulpt/codemirror.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/skulpt/python.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blockly/blockly_compressed.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blockly/blocks_compressed.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blockly/javascript_compressed.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blockly/python_compressed.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blockly/msg/js/en.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/mobile-detect.min.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/raphael.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/howler.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/fpsmeter.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/drawingConstants.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/character.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/drawing.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/tab.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/messages.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/animation.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/pythonControl.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blocklyControl.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blocklyCompiler.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blocklyCustomBlocks.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blocklyCustomisations.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/loadLanguages.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/blocklyMessages.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/model.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/pathFinder.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/map.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/cow.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/trafficLight.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/destination.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/van.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/node.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/coordinate.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/program.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/sound.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/saving.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/sharing.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/game.js' %}"></script>
  <script defer type="text/javascript" src="{% static 'game/js/event.js' %}"></script>

  <script defer type="text/javascript">
    $(function() {
      document.addEventListener('fps', function(e) {
        document.getElementById('fps').innerHTML = e.fps + ' fps';
      }, false);
      //FPSMeter.run(0.5);
    });
  </script>

{% endblock %}

{% block css %}
{{block.super}}
    <link href="{% static 'game/css/game.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/game_screen.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/level_share.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/skulpt/codemirror.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'game/css/skulpt/eclipse.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block content %}
{{ block.super }}

<div style='position: fixed; top: 0; right: 0; background: black; z-index: 99'>
  <div id='fps' style='font-size: 2em; color: white'></div>
</div>

<div id="wrapper" class="unselectable">
  <span id="game_page"></span>

  <div id="tabs" class='no-print bg--{{ level.difficulty }}'>
    <div id="blockly_tab" class="tab selectable {% if level.blocklyEnabled %}{% else %}hidden{% endif %}">
      <input type="radio" name="tabs" id="blockly_radio" checked>
      <label for="blockly_radio">
        <img src="{% static 'game/image/icons/blockly.svg' %}">
        <span>{% trans "Blockly" %}</span>
      </label>
    </div>
    <div id="language_tab" class="tab">
      <select name="language_dropdown" class="tab selectable bg--{{level.difficulty}} {% if level.pythonEnabled %}hidden{% endif %}" id="language_dropdown" onchange="gameUpdateBlockLanguageAndCookie(this.value)">
        {% for language_code, language in available_language_dict.items %}
          <option id="language_dropdown_{{language_code}}" value="{{language_code}}">{{language}}</option>
        {% endfor %}
      </select>
    </div>

    <div class="tab_break"></div>

    <div id="python_tab" class="tab selectable {% if level.pythonEnabled %}{% else %}hidden{% endif %}">
      <input type="radio" name="tabs" id="python_radio">
      <label for="python_radio">
        <img src="{% static 'game/image/icons/python.svg' %}">
        <span>{% trans "Python" %}</span>
      </label>
    </div>

    <div id="clear_tab" class="tab">
      <input type="radio" name="tabs" id="clear_program_radio">
      <label for="clear_program_radio">
        <img src="{% static 'game/image/icons/clear.svg' %}">
        <span>{% trans "Clear" %}</span>
      </label>
    </div>

    <div class="tab_break"></div>

    <div id="play_tab" class="tab">
      <input type="radio" name="tabs" id="play_radio">
      <label for="play_radio">
        <img src="{% static 'game/image/icons/play.svg' %}">
        <span>{% trans "Play" %}</span>
        {% csrf_token %}
      </label>
    </div>

    <div id="fast_tab" class="tab">
      <input type="radio" name="tabs" id="fast_radio">
      <label for="fast_radio">
          <img src="{% static 'game/image/icons/fast.svg' %}">
          <span>{% trans "Fast" %}</span>
      </label>
    </div>

    <div id="stop_tab" class="tab">
      <input type="radio" name="tabs" id="stop_radio">
      <label for="stop_radio">
        <img src="{% static 'game/image/icons/stop.svg' %}">
        <span>{% trans "Stop" %}</span>
      </label>
    </div>

    <div id="step_tab" class="tab">
      <input type="radio" name="tabs" id="step_radio">
      <label for="step_radio">
        <img src="{% static 'game/image/icons/step.svg' %}">
        <span>{% trans "Step" %}</span>
      </label>
    </div>

    <div class="tab_break"></div>

      <div id="solution_tab" class="tab selectable" hidden>
          <input type="radio" name="tabs" id="solution_radio">
          <label for="solution_radio">
              <img src="{% static 'game/image/icons/solve.svg' %}">
              <span>{% trans "Solve" %}</span>
          </label>
      </div>
{% if request.user.is_authenticated %}
    <div id="load_tab" class="tab selectable">
      <input type="radio" name="tabs" id="load_radio">
      <label for="load_radio">
        <img src="{% static 'game/image/icons/load.svg' %}">
        <span>{% trans "Load" %}</span>
      </label>
    </div>

    <div id="save_tab" class="tab selectable">
      <input type="radio" name="tabs" id="save_radio">
      <label for="save_radio">
        <img src="{% static 'game/image/icons/save.svg' %}">
        <span>{% trans "Save" %}</span>
      </label>
    </div>

    {% if user|get_user_status == 'TEACHER' and not level.default%}
    <div id="share_tab" class="tab selectable">
      <input type="radio" name="tabs" id="share_radio">
      <label for="share_radio">
        <img src="{% static 'game/image/icons/share.svg' %}">
        <span>Share</span>
      </label>
    </div>
    {% endif %}
{% endif %}
    <div class="tab_break"></div>

    <div id="help_tab" class="tab selectable">
      <input type="radio" name="tabs" id="help_radio">
      <label for="help_radio">
        <img src="{% static 'game/image/icons/help.svg' %}">
        <span>{% trans "Help" %}</span>
      </label>
    </div>

    <!--div class="tab">
      <input type="radio" name="tabs" id="big_code_mode_radio">
      <label for="big_code_mode_radio">
        <img src="{% static 'game/image/icons/big_code_mode.svg' %}">
        <span>Enlarge</span>
      </label>
    </div-->

    <div id="mute_tab" class="tab">
      <input type="radio" name="tabs" id="mute_radio">
      <label for="mute_radio">
        <img src="{% static 'game/image/icons/muted.svg' %}">
        <span id="mute_text">{% trans "Mute" %}</span>
      </label>
    </div>

  <div id="nightmode_tab" class="tab hidden">
      <input type="radio" name="tabs" id="nightmode_radio">
      <label for="nightmode_radio">
          {% if night_mode == "true" %}
        <img src="/static/game/image/icons/day.svg">
        <span>{% trans "Day" %}</span>
          {% else %}
          <img src="/static/game/image/icons/night.svg">
        <span>{% trans "Night" %}</span>
          {% endif %}
      </label>
    </div>

    <div  id="quit_tab" class="tab">
      <input type="radio" name="tabs" id="quit_radio">
      <label for="quit_radio">
        <img src="{% static 'game/image/icons/quit.svg' %}">
        <span>{% trans "Exit" %}</span>
      </label>
    </div>

  </div>

  <div id="right">
    <div id="tab_panes" class='no-print'>

      <div id="blockly_pane" class="tab_pane">
        <div id="blockCountDiv"></div>

        <div id="blockly_holder" style='width: calc(100%); {% if level.pythonViewEnabled %} height: 50%; {% endif %}'></div>

        {% if level.pythonViewEnabled %}
          <div id="pythonViewSlider" class="no-print"></div>
        {% endif %}

        <div id="pythonView_holder" {% if not level.pythonViewEnabled %} style="visibility: hidden" {% endif %}>
          <p>{% trans "This is what your program would look like in Python:" %}</p>
          <textarea id="pythonView" cols="85" rows="25"></textarea>
        </div>
      </div>

      <div id="python_pane" class="tab_pane">
        <div id="pythonCode" {% if not level.pythonEnabled %} style="visibility: hidden" {% endif %}>
          <div id="editor">
            <div class="description">
              <h3>{% trans "Python Program" %}
                {% if level.blocklyEnabled %}
                <button class="navigation_button long_button" id="convert_from_blockly">
                  <span>{% trans "Convert from Blockly" %}</span>
                </button>
                {% endif %}
              </h3>
              <div>
                  <div id="pythonIntro">{% trans "Use the Python editor below to design your program, and then click play to try it out!" %}</div>
                  <button class="navigation_button_portal long_button" id="van_commands_help">
                    <img src="{% static 'game/image/icons/python.svg' %}">
                    <span>{% trans "Commands" %}</span>
                  </button>
                </div>
                <textarea id="code" cols="85" rows="25"></textarea>
              </div>
              </div>

            <div id="consoleLogSlider" class="no-print"></div>
            <div id="console">
              <div id="consoleRunCode">
                <button onclick="runCode()" id="run-code-button" class="navigation_button_kurono">
                    <span>{% trans "Run code" %}</span>
                    <img src="{% static 'game/image/icons/play.svg' %}">
                </button>
                  <h4>
                    {% trans "Console log" %}
                  </h4>
              </div>
              <textarea disabled="" id="consoleOutput"></textarea>
              <button class="navigation_button_kurono" id="clear_console">
                <span>{% trans "Clear console" %}</span>
                <span class="iconify icon" data-icon="ic:baseline-delete-outline"></span>
              </button>
            </div>
        </div>
      </div>

      <div id="load_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/load.svg" %}'>{% trans "Load" %}</h2>
          <p>{% trans "Here you can load a program you've previously saved!" %}</p>
          <div style="width:auto">
            <div id="does_not_exist">
              <p> {% trans "You don't have any programs to load yet. Try saving one!" %} </p>
            </div>
            <div class="scrolling-table-wrapper">
              <table id="loadWorkspaceTableHeader">
                <thead>
                  <tr>
                    <th>{% trans "Name" %}</th>
                  </tr>
                </thead>
              </table>
              <div class="scrolling-table">
                <table id="loadWorkspaceTable">
                  <tbody></tbody>
                </table>
              </div>
            </div>
            <br>
            <div>
              <button class="navigation_button long_button" id="deleteWorkspace">
                <img src="{% static 'game/image/icons/clear.svg' %}"/>
                <span>{% trans "Delete" %}</span>
              </button>

              <button class="navigation_button long_button" id="loadWorkspace">
                <img src="{% static 'game/image/icons/load.svg' %}"/>
                <span>{% trans "Load" %}</span>
              </button>
            </div>
          </div>
      </div>

      <div id="save_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/save.svg' %}">{% trans "Save" %}</h2>
        <p>{% trans "Here you can save your program so you can retrieve it later!" %}</p>
        <div class="scrolling-table-wrapper">
          <table id="saveWorkspaceTableHeader">
            <thead>
              <tr>
                <th>{% trans "Name" %}</th>
              </tr>
            </thead>
          </table>
          <div class="scrolling-table">
            <table id="saveWorkspaceTable">
              <tbody></tbody>
            </table>
          </div>
        </div>
        <br>
        <div>
          <input type="text" id="workspaceNameInput">
          <button class="navigation_button long_button" id="saveWorkspace">
            <img src="{% static 'game/image/icons/save.svg' %}">
            <span>{% trans "Save" %}</span>
          </button>
        </div>
      </div>

      {% if user|get_user_status == 'TEACHER' and not level.default %}
      <div id="share_pane" class="tab_pane">
        <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/share.svg' %}">Share</h2>

        <p>Here you can share this level with your classes or your fellow teachers.</p>

        <div class="table_control_div">
          <p>
            Share with:
            <select id="share_type_select">
              <option value="classes" selected>Classes</option>
              <option value="teachers">Teachers</option>
            </select>
          </p>

          <p id="class_selection">
            Class: <select id="class_select"></select>
          </p>

          <div id="shared_levels" class="scrolling-table-wrapper">
            <table width='100%' id="shareLevelTableHeader">
              <thead>
                <tr>
                  <th>{% trans "Name" %}</th>
                  <th>{% trans "Shared" %}</th>
                </tr>
              </thead>
            </table>
            <div class="scrolling-table">
              <table width='100%' id="shareLevelTable">
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>

        <button class="navigation_button long_button" id="shareWithAll">
          <img src="{% static 'game/image/icons/share.svg' %}">
          <span>Share with all</span>
        </button>
      </div>
      {% endif %}
    </div>

    <div id="paper" class="col" style="background-color: {{level.theme.background}}"></div>

    <div id="direct_drive" class="unselectable no-print">
      <button class="direct_drive_button" id="moveForward" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="turnLeft" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="go" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
      <button class="direct_drive_button" id="turnRight" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
    </div>

    <div id="zoom_pan" >
      <button class="direct_drive_button" id="zoomOut" ></button>
      <button class="direct_drive_button" id="zoomIn"></button>
    </div>

    <div id="fuelGauge" class="no-print unselectable">
      <img src="{% static 'game/image/fuelGauge.svg' %}"/>
      <div id="fuelGaugePointer">
        <img src="{% static 'game/image/fuelGaugePointer.svg' %}"/>
      </div>
    </div>

    <div id="electricFuelGauge" class="no-print unselectable">
      <electric-gauge />
    </div>

    <div id="consoleSlider" class="no-print"></div>

  </div>
</div>

<script>
  document.getElementById("language_dropdown").value = navigator.language.toLowerCase();

  if (document.getElementById("language_dropdown").value == "") {
    document.getElementById("language_dropdown").value = "en";
  }
</script>

<script>
  customElements.define("electric-gauge", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => {
        this.innerHTML = `<svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119.58 119.58">
                            <defs>
                              <linearGradient id="c" x1="2.5" y1="59.86" x2="117.08" y2="59.86" gradientTransform="translate(0 119.65) scale(1 -1)" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#050505"/>
                                <stop offset="1" stop-color="#111"/>
                              </linearGradient>
                              <linearGradient id="g" x1="30.57" y1="24.62" x2="38.29" y2="24.62" gradientTransform="translate(20.78 -15.45) rotate(35.62)" xlink:href="#c"/>
                              <linearGradient id="h" x1="12.95" y1="46.44" x2="24.09" y2="46.44" gradientTransform="translate(56.12 13.48) rotate(70.5)" xlink:href="#c"/>
                              <linearGradient id="i" x1="59.23" y1="16.37" x2="60.45" y2="16.37" gradientTransform="matrix(1,0,0,1,0,0)" xlink:href="#c"/>
                              <linearGradient id="j" x1="59.23" y1="103.05" x2="60.45" y2="103.05" gradientTransform="matrix(1,0,0,1,0,0)" xlink:href="#c"/>
                              <linearGradient id="k" x1="12.96" y1="73.1" x2="24.28" y2="73.1" gradientTransform="translate(23.5 -2.18) rotate(18)" xlink:href="#c"/>
                              <linearGradient id="l" x1="30.5" y1="94.77" x2="38.24" y2="94.77" gradientTransform="translate(90.82 11.25) rotate(53.99)" xlink:href="#c"/>
                              <linearGradient id="m" x1="81.28" y1="95.01" x2="89.02" y2="95.01" gradientTransform="translate(72.11 -31.9) rotate(36)" xlink:href="#c"/>
                              <linearGradient id="n" x1="81.29" y1="24.57" x2="89.01" y2="24.57" gradientTransform="translate(55.5 -58.95) rotate(54.36)" xlink:href="#c"/>
                              <linearGradient id="o" x1="95.49" y1="46.4" x2="106.63" y2="46.4" gradientTransform="translate(21.24 -31.02) rotate(19.47)" xlink:href="#c"/>
                              <linearGradient id="p" x1="95.3" y1="73.06" x2="106.61" y2="73.06" gradientTransform="translate(139.25 -45.53) rotate(72.01)" xlink:href="#c"/>
                              <linearGradient id="r" x1="59.79" y1="116.72" x2="59.79" y2="56.09" gradientTransform="translate(0 119.65) scale(1 -1)" gradientUnits="userSpaceOnUse">
                                <stop offset="0" stop-color="#fff" stop-opacity=".4"/>
                                <stop offset="1" stop-color="#fff" stop-opacity="0"/>
                              </linearGradient>
                              <radialGradient id="s" cx="59.25" cy="619.61" fx="59.25" fy="619.61" r="96.47" gradientTransform="translate(0 -88.24) scale(1 .28)" gradientUnits="userSpaceOnUse">
                                <stop offset=".29" stop-color="#fff" stop-opacity="0"/>
                                <stop offset="1" stop-color="#fff" stop-opacity=".4"/>
                              </radialGradient>
                            </defs>
                            <g id="b">
                              <circle fill="url(#c)" cx="59.79" cy="59.79" r="57.29"/>
                              <path fill="#141414" stroke-width="0px" d="M59.79,13.14c29.86,0,54.38,22.85,57.05,52.02.16-1.74.24-3.49.24-5.27,0-31.64-25.65-57.29-57.29-57.29S2.5,28.25,2.5,59.88c0,1.78.09,3.54.24,5.27C5.4,35.99,29.93,13.14,59.79,13.14Z"/>
                              <path stroke="#fff" fill="none" stroke-miterlimit="10" d="M59.79,109.9c-27.63,0-50.11-22.48-50.11-50.11S32.16,9.68,59.79,9.68s50.11,22.48,50.11,50.11-22.48,50.11-50.11,50.11Z"/>
                              <circle fill="none" stroke-miterlimit="10" stroke="#3a3a3a" stroke-width="5px"  cx="59.79" cy="59.79" r="57.29"/>
                            </g>
                            <path id="d" fill="#fff" stroke-width="0px" d="M68.91,70.86h-7.35c-.28,0-.48-.26-.42-.53l2.49-10.37c.11-.46-.49-.74-.77-.35l-11.46,16.1c-.2.28,0,.68.35.68h7.35c.28,0,.48.26.42.53l-2.49,10.37c-.11.46.49.74.77.35l11.46-16.1c.2-.28,0-.68-.35-.68Z"/>
                            <g id="e" isolation="isolate">
                              <g isolation="isolate">
                                <text 
                                  id="Text_percentage" 
                                  data-name="Text percentage" 
                                  font-family="LilitaOne, 'Lilita One'"
                                  font-size="16px"
                                  transform="translate(43.2 48.2)" 
                                  fill="#4ba0dd">
                                  <tspan id="Text_percentage_value" x="0" y="0">100%</tspan>
                                </text>
                              </g>
                            </g>
                            <path id="f" fill="#4ba0dd" stroke-width="0px" d="
                              M106.22,44.62
                              c-3.21-9.9-9.5-18.41-17.74-24.4-8.06-5.86-17.97-9.33-28.69-9.33s-20.64,3.47-28.69,9.33
                              c-8.24,6-14.53,14.5-17.74,24.4-1.54,4.75-2.39,9.82-2.39,15.09
                              s.84,10.33,2.39,15.09
                              c3.21,9.9,9.5,18.41,17.74,24.4,8.06,5.86,17.97,9.33,28.69,9.33
                              s20.64-3.47,28.69-9.33
                              c8.24-6,14.53-14.5,17.74-24.4,1.54-4.75,2.39-9.82,2.39-15.09
                              s-.84-10.33-2.39-15.09Z
                              M82.27,90.65
                              c-6.31,4.59-14.08,7.31-22.48,7.31
                              s-16.17-2.72-22.48-7.31
                              c-6.46-4.7-11.38-11.36-13.9-19.12-1.21-3.72-1.87-7.69-1.87-11.82s.66-8.1,1.87-11.82
                              c2.52-7.76,7.44-14.42,13.9-19.12,6.31-4.59,14.08-7.31,22.48-7.31
                              s16.17,2.72,22.48,7.31
                              c6.46,4.7,11.38,11.36,13.9,19.12,1.21,3.72,1.87,7.69,1.87,11.82
                              s-.66,8.1-1.87,11.82
                              c-2.52,7.76-7.44,14.42-13.9,19.12Z"
                              />
                            <circle 
                              id="emptying_circle"
                              cx="59.79"
                              cy="59.79"
                              r="43.5" 
                              stroke-width="11" 
                              stroke="#213a47" 
                              fill="transparent"
                              stroke-dasharray="273.18"
                              stroke-dashoffset="273.18"
                              transform="rotate(90, 59.79, 59.79)"
                              />
                            <rect fill="url(#g)" stroke-width="0px" x="33.82" y="18.84" width="1.22" height="11.56" transform="translate(-7.9 24.66) rotate(-35.62)"/>
                            <rect fill="url(#h)" stroke-width="0px" x="17.91" y="40.75" width="1.22" height="11.39" transform="translate(-31.44 48.4) rotate(-70.5)"/>
                            <rect fill="url(#i)" stroke-width="0px" x="59.23" y="10.63" width="1.22" height="11.5"/>
                            <rect fill="url(#j)" stroke-width="0px" x="59.23" y="97.3" width="1.22" height="11.5"/>
                            <rect fill="url(#k)" stroke-width="0px" x="12.87" y="72.49" width="11.5" height="1.22" transform="translate(-21.68 9.33) rotate(-18)"/>
                            <rect fill="url(#l)" stroke-width="0px" x="28.62" y="94.16" width="11.49" height="1.22" transform="translate(-62.5 66.86) rotate(-53.99)"/>
                            <rect fill="url(#m)" stroke-width="0px" x="84.54" y="89.26" width="1.22" height="11.49" transform="translate(-39.58 68.19) rotate(-36)"/>
                            <rect fill="url(#n)" stroke-width="0px" x="79.37" y="23.96" width="11.56" height="1.22" transform="translate(15.57 79.46) rotate(-54.36)"/>
                            <rect fill="url(#o)" stroke-width="0px" x="95.36" y="45.79" width="11.39" height="1.22" transform="translate(-9.69 36.33) rotate(-19.47)"/>
                            <rect fill="url(#p)" stroke-width="0px" x="100.35" y="67.31" width="1.22" height="11.5" transform="translate(.28 146.51) rotate(-72.01)"/>
                            <g id="q">
                              <path fill="url(#r)" stroke-width="0px" d="M109.8,47.55c0,27.62-20.9,6.09-50.02,6.09s-50.02,21.53-50.02-6.09C9.77,29.42,33.7,7.65,59.79,7.65s50.02,22.32,50.02,39.9Z"/>
                              <path fill="url(#s)" stroke-width="0px" d="M97.33,91.74c0-13.29-15.69-2.93-37.54-2.93s-37.55-10.36-37.55,2.93c0,8.73,17.96,20.18,37.55,20.18,19.58,0,37.54-11.72,37.54-20.18Z"/>
                            </g>
                          </svg>`
      })
    }
  })
</script>

{% endblock %}