{% extends "templates/index.html" %}
{% autoescape None %}

{% block html_head %}

    <style type="text/css">
      body {
          margin: 0px;
          padding: 0px;
          overflow: hidden;
      }

      .bci_dashboard {
          overflow: auto;
      }

      .bci_stimuli {
          position: relative;
      }

      .bci_dashboard,
      .bci_stimuli {
          border: 0px solid;
          border-radius: 0;
      }


    .cross {
        background: black;
        height: 40px;
        width: 1px;
        position: absolute;
        left: 50%;
        top: calc(50% - 20px);
        z-index: 99;
    }

    .cross::after {
        background: black;
        content: '';
        height: 1px;
        left: -20px;
        position: absolute;
        top: 20px;
        width: 40px;
        z-index: 99;
    }

    .cross_contrast {
        background: white;
        height: 42px;
        width: 3px;
        position: absolute;
        left: calc(50% - 1px);
        top: calc(50% - 21px);
        z-index: 98;
    }

    .cross_contrast::after {
        background: white;
        content: '';
        height: 3px;
        left: -21px;
        position: absolute;
        top: 20px;
        width: 42px;
        z-index: 98;
    }

      {% if mode == 'stimuli' %}

        .bci_dashboard {
            display: none;
        }

        .bci_stimuli {
            background-color: #f5f5f5;
            width: 100vw;
            height: 100vh;
        }

        .run_progressbar {
            width: 100vw;
        }

      {% elif mode == 'dashboard' %}

        body {
        display: inline-flex;
        }

        .bci_dashboard {
            padding: 15px;
            height: calc(100vh - 30px);
            overflow: auto;
            width: calc(50vw - 15px);
        }

        .bci_stimuli {
            background-color: #f5f5f5;
            width: calc(50vw - 15px);
            height: 100vh;
        }

        .run_progressbar {
            width: calc(50vw - 16px);
            margin-left: 1px;
        }

      {% end %}

    </style>
{% end %}


{% block module_init %}
import json
from browser import window
window.brython_environ = {{brython_environ}}
arr = {{class_}}(None, {{python_}})
arr.connect(f'{{ip}}', f'{{port}}')
arr._bci_mode = '{{mode}}'
if not hasattr(arr, 'DEBUG'): arr.DEBUG = '{{debug}}' == 'True'
arr._last_init()
{% end %}
<!--if arr.DEBUG: print('Debug mode: on')-->
<!--print('Debug mode: {{debug}}')-->
<!--print(f'Current mode: {arr._bci_mode}')-->
