<?php

require_once '../lib/Kendo/Autoload.php';

?>

<div class="k-rtl">
    <?php
        // create inner splitter
        $inner = new \Kendo\UI\Splitter('horizontal');
        $inner->attr("style", "height: 100%; width: 100%;");

        $leftPane = new \Kendo\UI\SplitterPane();
        $leftPane->attr("id", "left-pane")
                 ->collapsible(true)
                 ->startContent();
    ?>
        <div class="pane-content">
            <h3>Inner splitter / left pane</h3>
            <p>Resizable and collapsible.</p>
        </div>
    <?php
        $leftPane->endContent();
        $inner->addPane($leftPane);

        $centerPane = new \Kendo\UI\SplitterPane();
        $centerPane->attr("id", "center-pane")
                 ->collapsible(false)
                 ->startContent();
    ?>
        <div class="pane-content">
            <h3>Inner splitter / center pane</h3>
            <p>Resizable only.</p>
        </div>
    <?php
        $centerPane->endContent();
        $inner->addPane($centerPane);

        $rightPane = new \Kendo\UI\SplitterPane();
        $rightPane->attr("id", "center-pane")
                 ->collapsible(true)
                 ->startContent();
    ?>
        <div class="pane-content">
            <h3>Inner splitter / right pane</h3>
            <p>Resizable and collapsible.</p>
        </div>
    <?php
        $rightPane->endContent();
        $inner->addPane($rightPane);


        // create outer splitter
        $outer = new \Kendo\UI\Splitter('vertical');
        $outer->orientation("vertical");

        $topPane = new \Kendo\UI\SplitterPane();
        $topPane->attr("id", "top-pane")
                ->collapsible(false)
                ->content($inner->render());

        $middlePane = new \Kendo\UI\SplitterPane();
        $middlePane->attr("id", "middle-pane")
                   ->collapsible(false)
                   ->size(100)
                   ->startContent();
    ?>
        <div class="pane-content">
            <h3>Outer splitter / middle pane</h3>
            <p>Resizable only.</p>
        </div>
    <?php
        $middlePane->endContent();

        $bottomPane = new \Kendo\UI\SplitterPane();
        $bottomPane->attr("id", "bottom-pane")
                   ->collapsible(false)
                   ->resizable(false)
                   ->size(100)
                   ->startContent();
    ?>
        <div class="pane-content">
            <h3>Outer splitter / bottom pane</h3>
            <p>Non-resizable and non-collapsible.</p>
        </div>
    <?php
        $bottomPane->endContent();

        $outer->addPane($topPane, $middlePane, $bottomPane);

        echo $outer->render();
    ?>
</div>

<style>
    #vertical {
      height: 380px;
      margin: 0 auto;
    }
    #middle-pane {
      background-color: rgba(60, 70, 80, 0.10);
    }
    #bottom-pane {
      background-color: rgba(60, 70, 80, 0.15);
    }
    #left-pane {
      background-color: rgba(60, 70, 80, 0.05);
    }
    #center-pane {
      background-color: rgba(60, 70, 80, 0.05);
    }
    #right-pane {
      background-color: rgba(60, 70, 80, 0.05);
    }
    .pane-content {
      padding: 0 10px;
    }
</style>