<!--
  ~ Copyright 2015 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:j="urn:import:org.jbpm.dashboard.renderer.client.panel.widgets"
             xmlns:d="urn:import:org.dashbuilder.displayer.client"
             xmlns:b="urn:import:org.gwtbootstrap3.client.ui">

  <ui:with field='i18n' type='org.jbpm.dashboard.renderer.client.panel.i18n.DashboardConstants'/>

  <ui:style>
    .body {
      padding: 20px;
      background-color: #E9E9E9;
    }

    .chartsRow {
      margin-bottom: 20px;
    }

  </ui:style>

  <b:Container fluid="true">
    <b:Row>
      <b:Column size="MD_12">
        <g:FlowPanel>
          <b:Heading ui:field="headerLabel" size="H3" text="{i18n.allProcesses}"/>
        </g:FlowPanel>

        <!-- Dashboard -->
        <b:Container fluid="true" addStyleNames="{style.body}" ui:field="dashboardPanel">
          <b:Row ui:field="processBreadCrumbRow" visible="false">
            <b:Column size="MD_12">
              <j:ProcessBreadCrumb ui:field="processBreadCrumb"/>
            </b:Column>
          </b:Row>
          <b:Row>
            <b:Column size="MD_2">
              <j:DisplayerContainer ui:field="totalContainer"/>
            </b:Column>
            <b:Column size="MD_2" pull="RIGHT">
              <j:DisplayerContainer ui:field="activeContainer"/>
            </b:Column>
            <b:Column size="MD_2">
              <j:DisplayerContainer ui:field="pendingContainer"/>
            </b:Column>
            <b:Column size="MD_2">
              <j:DisplayerContainer ui:field="suspendedContainer"/>
            </b:Column>
            <b:Column size="MD_2">
              <j:DisplayerContainer ui:field="abortedContainer"/>
            </b:Column>
            <b:Column size="MD_2">
              <j:DisplayerContainer ui:field="completedContainer"/>
            </b:Column>
          </b:Row>
          <b:Row addStyleNames="{style.chartsRow}">
            <b:Column size="MD_4">
              <j:DisplayerContainer ui:field="container1"/>
            </b:Column>
            <b:Column size="MD_4">
              <j:DisplayerContainer ui:field="container2"/>
            </b:Column>
            <b:Column size="MD_4">
              <j:DisplayerContainer ui:field="container3"/>
            </b:Column>
          </b:Row>
          <b:Row>
            <b:Column size="MD_4">
              <j:DisplayerContainer ui:field="container4"/>
            </b:Column>
            <b:Column size="MD_4">
              <j:DisplayerContainer ui:field="container5"/>
            </b:Column>
            <b:Column size="MD_4">
              <j:DisplayerContainer ui:field="container6"/>
            </b:Column>
          </b:Row>
        </b:Container>

        <!-- Instances table -->
        <g:FlowPanel ui:field="instancesPanel" visible="false">
          <d:Displayer ui:field="processesTable"/>
        </g:FlowPanel>

      </b:Column>
    </b:Row>
  </b:Container>
</ui:UiBinder>