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

{% 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);
    }

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

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

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

      {% 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: calc(100vh - 4px);
        }

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

      {% end %}

    </style>
{% end %}


{% block module_init %}
arr = {{class_}}(None, {{python_}})
arr.connect(f'{{port}}')
arr._bci_mode = '{{mode}}'
{% end %}