{% extends 'layout.jinja2.html' %}

{% block title %}{{cluster_name}} cluster information{% endblock %}

{% block style %}
#console {
    position: absolute;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-y: scroll;
    word-wrap: break-word;
    background: #333;
    color: #7f9;
    padding-left: 10px;
    padding-right: 10px;
}

#console span {
    white-space: pre;
}

#status_indicator {
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 50%;
}

#cluster_info {
    float:left;
}

.error_text {
    color: #f00;
}
.non_realtime {
    color: #383;
}
.status_working {
    background: #0f0;
}
.status_wait {
    background: #00f;
}
.status_disconnected {
    background: #fffb0f;
}
.status_error {
    background: #f00;
}

span#cluster_name {
    text-transform: capitalize;
    font-weight: bold;
}

{% endblock %}

{% block body %}

<div id="status_indicator" class="status_disconnected"></div>
<div id="cluster_info">
  <span id="cluster_name">{{cluster_name}}</span><br/>
  <span id="cluster_status"></span>
</div><br/>
<hr/>
<div id='console'>
<div>

<script src="/static/js/console.js"></script>
{% endblock %}
