<div
    style="
        color: #413F3B;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 360px;
        box-sizing: border-box;
        padding: 12px;
        background-color: #E8E1D4;
        border-radius: 6px;
    "
>
  <div style="flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;">
    <div>
      <span style="font-weight: 600;">Cluster Name:</span><span> {{ cluster_name }}</span>
    </div>
    <div>
      <span style="font-weight: 600;">Cluster Status:</span><span> {{ overall_cluster_status | title }}</span>
    </div>
    <div>
      <span style="font-weight: 600;">Dashboard:</span>
      {% if dashboard_address is not none %}
        <a
          style="color: blue; text-decoration: underline;"
          href="http://{{ dashboard_address }}:8787"
          target="_blank"
        >
        http://{{ dashboard_address }}:8787
        </a>
     {% else %}
       <span>Scheduler has not started yet</span>
     {% endif %}
    </div>
  </div>
  {%- include "progress.html.j2" -%}
  {%- if error_logs -%}
  <div style="flex: 2 1 auto">
    <b>Error Logs</b>
    <pre style="white-space: pre; height: 128px; width: 512px; border: 1px solid gray">
      {%- for state in error_logs | reverse -%}
        <code style="color: red;">ERROR: {{ state | format_error_state }}</code><br>
      {%- endfor -%}
    </pre>
  </div>
  {%- endif -%}
</div>
