<body class="kx-page">
    <div class="kx-page__canvas kx-flex kx-justify-content-start kx-align-items-start">

        <div class="kx-page__header kx-flex">
            <header class="kx-header kx-flex kx-align-items-center" role="banner">
                <button class="kx-btn kx-hamburger kx-hamburger--spin kx-header__nav-toggle kx-js-header__nav-toggle">
    <span class="kx-hamburger__inner">
        <span class="kx-hamburger__icon"></span>
    </span>
    <span class="kx-hamburger__txt kx-is-vishidden">Menu</span>
</button>
                <a class="kx-header__title" href="#">
            My Company
        </a>
                <div class="kx-header__tools">
                    <!-- BUTTON-GROUP Component -->
                    <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-ui" role="group" aria-label="Tools and settings">
                        <!-- DROPDOWN Component -->
                        <div class="kx-dropdown" role="group">
                            <button id="--24077" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#user"></use>
    </svg>
</i>
                <span class="kx-btn__txt kx-is-vishidden">User</span>
                </span>
    </button>
                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--24077">
                                <ul class="kx-dropdown__list">
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">My profile</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Notification settings</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Security</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Usage</span>
                            </a>
                                    </li>
                                    <li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Logout</span>
                            </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- DROPDOWN Component -->
                        <div class="kx-dropdown" role="group">
                            <button id="--22581" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
                <span class="kx-btn__txt kx-is-vishidden">Settings</span>
                </span>
    </button>
                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--22581">
                                <ul class="kx-dropdown__list">
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Menu Editor</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Unit of Measure</span>
                            </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- DROPDOWN Component -->
                        <div class="kx-dropdown" role="group">
                            <button id="--81143" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#dots-horizontal"></use>
    </svg>
</i>
                <span class="kx-btn__txt">More</span>
                </span>
    </button>
                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--81143">
                                <ul class="kx-dropdown__list">
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Support</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Give feedback</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Community</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Privacy policy</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">About Kognifai</span>
                            </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </header>
        </div>

        <div class="kx-page__nav">

            <nav class="kx-nav kx-nav--main" aria-labelledby="--42696">
                <div class="kx-nav__search">
                    <div class="kx-inputgroup">
                        <!-- FIELD Component -->
                        <div class="kx-form__element">
                            <input class="kx-field kx-field--size-base" id="--49978" type="search" placeholder="Find component" />
                            <label class="kx-label kx-is-vishidden" for="--49978">
        Find Component
    </label>
                        </div>
                        <!-- BUTTON Component -->
                        <button class="kx-btn kx-btn--skin-primary kx-btn--size-base kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
                    </div>
                </div>
                <h2 class="kx-nav__header kx-is-vishidden" id="--42696">Main Navigation</h2>
                <ul class="kx-tree kx-is-root">
                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="0">
                        <a href="#" class="kx-tree__link">
                            <!-- ICON Component -->
                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                            <!-- ICON Component -->
                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                            <span class="kx-tree__link__txt">Link level 0</span>
                        </a>
                        <ul class="kx-tree">
                            <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="kx-tree__item kx-is-node" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="kx-tree__item kx-is-node" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="kx-tree__item kx-is-node" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="kx-page__main">
            <main class="kx-main" role="main">

                <button class="kx-page__overlay">
                    <span class="kx-is-vishidden">Close</span>
                </button>

                <div class="kx-page__content">

                    <div class="kx-menubar kx-theme--foam">
                        <div class="kx-container">
                            <div class="kx-row kx-align-items-center">
                                <div class="kx-col">
                                    <!-- TABS Component -->
                                    <nav class="kx-tabs">
                                        <ol class="kx-tabs__list">
                                            <li class="kx-tabs__item kx-is-active">
                                                <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Foo</span>
            </a>
                                            </li>
                                            <li class="kx-tabs__item">
                                                <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Bar</span>
            </a>
                                            </li>
                                            <li class="kx-tabs__item">
                                                <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Baz</span>
            </a>
                                            </li>
                                        </ol>
                                    </nav>
                                </div>
                                <div class="kx-col">
                                    <!-- BUTTON-GROUP Component -->
                                    <div class="kx-btngroup kx-flex kx-flex-wrap kx-justify-content-end" role="group" aria-label="A button group">
                                        <!-- BUTTON Component -->
                                        <button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#plus"></use>
    </svg>
</i>
        <span class="kx-btn__txt">New</span>
    </span>
</button>
                                        <!-- DROPDOWN Component -->
                                        <div class="kx-dropdown" role="group">
                                            <button id="--47090" class="kx-dropdown__toggle kx-btn kx-btn--skin-secondary kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <span class="kx-btn__txt">Details</span>
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-small kx-dropdown__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
    </svg>
</i>
                </span>
    </button>
                                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--47090">
                                                <ul class="kx-dropdown__list">
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Password</span>
                            </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Caci</span>
                            </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                                                            <!-- ICON Component -->
                                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#arrow-down"></use>
    </svg>
</i><span class="kx-dropdown__item__txt">Download</span>
                                                        </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Edit</span>
                            </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                                                            <!-- ICON Component -->
                                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#papers"></use>
    </svg>
</i><span class="kx-dropdown__item__txt">Notes</span>
                                                        </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Server</span>
                            </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Retire</span>
                            </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                                                            <!-- ICON Component -->
                                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i><span class="kx-dropdown__item__txt">Tools</span>
                                                        </a>
                                                    </li>
                                                    <li class="kx-dropdown__item">
                                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Deploy</span>
                            </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <header class="kx-app__header">
                        <h1 class="kx-app__title">Dashboard Title</h1>
                    </header>
                    <div class="kx-container">
                        <div class="kx-row kx-row--gutters">
                            <div class="kx-col kx-col--12">
                                <div class="kx-card kx-card--skin-default kx-p--small">
                                    <div class="kx-row kx-row--gutters">
                                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                                            <div class="kx-row kx-row--gutters">
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--61254" type="text" value="117" readonly />
                                                        <label class="kx-label" for="--61254">
        Node ID
    </label>
                                                    </div>
                                                </div>
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--93299" type="text" value="router" readonly />
                                                        <label class="kx-label" for="--93299">
        Type
    </label>
                                                    </div>
                                                </div>
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--60928" type="text" value="Development user" readonly />
                                                        <label class="kx-label" for="--60928">
        Created by
    </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                                            <div class="kx-row kx-row--gutters">
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--36989" type="text" value="N/a" readonly />
                                                        <label class="kx-label" for="--36989">
        Last Latency
    </label>
                                                    </div>
                                                </div>
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--88734" type="text" value="Pacific Drilling" readonly />
                                                        <label class="kx-label" for="--88734">
        Logical Network
    </label>
                                                    </div>
                                                </div>
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--10359" type="text" value="Cisco-TK421" readonly />
                                                        <label class="kx-label" for="--10359">
        Device
    </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                                            <div class="kx-row kx-row--gutters">
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--73018" type="text" value="2017.11.16 13:10:48" readonly />
                                                        <label class="kx-label" for="--73018">
        Created
    </label>
                                                    </div>
                                                </div>
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--70489" type="text" value="117" readonly />
                                                        <label class="kx-label" for="--70489">
        Host Name
    </label>
                                                    </div>
                                                </div>
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--30477" type="text" value="fn2187" readonly />
                                                        <label class="kx-label" for="--30477">
        Description
    </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                                            <div class="kx-row kx-row--gutters">
                                                <div class="kx-col kx-col--12">
                                                    <!-- FIELD Component -->
                                                    <div class="kx-form__element">
                                                        <input class="kx-field kx-field--size-base" id="--19216" type="text" value="N/A" readonly />
                                                        <label class="kx-label" for="--19216">
        Last Seen
    </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="kx-row kx-row--gutters kx-align-items-stretch">
                            <div class="kx-col kx-col--12">
                                <div class="kx-card kx-card--skin-default">
                                    <table class="kx-table kx-table--fit-tight kx-table--fluid kx-table--highlight kx-ui">
                                        <thead class="kx-theme--foam">
                                            <tr>
                                                <th>Node ID</th>
                                                <th>Logical Network</th>
                                                <th>Host name</th>
                                                <th>Type</th>
                                                <th>Description</th>
                                                <th>Created By</th>
                                                <th>Created</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="">
                                                <td><a href="#">16385</a></td>
                                                <td>Floatel Test</td>
                                                <td>n16386-nndf-001</td>
                                                <td>Router</td>
                                                <td>Cisco809-SupportRouter</td>
                                                <td>Ola Normann</td>
                                                <td>5 years ago</td>
                                                <td>Edit</td>
                                            </tr>
                                            <tr class="">
                                                <td><a href="#">16385</a></td>
                                                <td>Noble Drilling</td>
                                                <td>n16386-nndf-001</td>
                                                <td>Router</td>
                                                <td>Cisco809-Common</td>
                                                <td>Ola Normann</td>
                                                <td>1 year ago</td>
                                                <td>Edit</td>
                                            </tr>
                                            <tr class="">
                                                <td><a href="#">16385</a></td>
                                                <td>Common</td>
                                                <td>n16386-nndf-001</td>
                                                <td>Router</td>
                                                <td>Cisco881</td>
                                                <td>Ola Normann</td>
                                                <td>3 years ago</td>
                                                <td>Edit</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="kx-col kx-col--12">
                                <div class="kx-card kx-card--skin-default">
                                    <table class="kx-table kx-table--fit-tight kx-table--fluid kx-table--highlight kx-ui">
                                        <thead class="kx-theme--foam">
                                            <tr>
                                                <th>Node ID</th>
                                                <th>Logical Network</th>
                                                <th>Host name</th>
                                                <th>Type</th>
                                                <th>Description</th>
                                                <th>Created By</th>
                                                <th>Created</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="">
                                                <td><a href="#">16385</a></td>
                                                <td>Floatel Test</td>
                                                <td>n16386-nndf-001</td>
                                                <td>Router</td>
                                                <td>Cisco809-SupportRouter</td>
                                                <td>Ola Normann</td>
                                                <td>5 years ago</td>
                                                <td>Edit</td>
                                            </tr>
                                            <tr class="">
                                                <td><a href="#">16385</a></td>
                                                <td>Noble Drilling</td>
                                                <td>n16386-nndf-001</td>
                                                <td>Router</td>
                                                <td>Cisco809-Common</td>
                                                <td>Ola Normann</td>
                                                <td>1 year ago</td>
                                                <td>Edit</td>
                                            </tr>
                                            <tr class="">
                                                <td><a href="#">16385</a></td>
                                                <td>Common</td>
                                                <td>n16386-nndf-001</td>
                                                <td>Router</td>
                                                <td>Cisco881</td>
                                                <td>Ola Normann</td>
                                                <td>3 years ago</td>
                                                <td>Edit</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </main>
        </div>

    </div>

    <script>
        let buttons = document.querySelectorAll('.kx-btn');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function(event) {
                this.blur();
            });
        }
    </script>
    <script src="../../assets/scripts/js/helpers.js"></script>
    <script src="../../assets/scripts/js/navigation.js"></script>
    <script src="../../assets/scripts/js/object-fit-fallback.js"></script>

    <script src="../../assets/scripts/js/components/dropdown.js"></script>

</body>
{% extends "@page" %}

{% block main %}
    <div class="kx-menubar kx-theme--foam">
        <div class="kx-container">
            <div class="kx-row kx-align-items-center">
                <div class="kx-col">
                    {% render '@tabs', tabs %}
                </div>
                <div class="kx-col">
                    {% render '@button-group',
                        {
                            ariaLabel: 'A button group',
                            align: ['kx-justify-content-end'],
                            buttons: [
                                {
                                    context: {
                                        text: 'New',
                                        skin: 'primary',
                                        size: 'base',
                                        icon: {
                                            symbol: 'plus',
                                            size: 'base'
                                        }
                                    }
                                },
                                {
                                    context: {
                                        text: 'Details',
                                        skin: 'secondary',
                                        size: 'base',
                                        'items': [
                                            {
                                                'text': 'Password',
                                                'href': '#'
                                            },
                                            {
                                                'text': 'Caci',
                                                'href': '#'
                                            },
                                            {
                                                'text': 'Download',
                                                'href': '#',
                                                icon: {
                                                    symbol: 'arrow-down',
                                                    size: 'base'
                                                }
                                            },
                                            {
                                                'text': 'Edit',
                                                'href': '#'
                                            },
                                            {
                                                'text': 'Notes',
                                                'href': '#',
                                                icon: {
                                                    symbol: 'papers',
                                                    size: 'base'
                                                }
                                            },
                                            {
                                                'text': 'Server',
                                                'href': '#'
                                            },
                                            {
                                                'text': 'Retire',
                                                'href': '#'
                                            },
                                            {
                                                'text': 'Tools',
                                                'href': '#',
                                                icon: {
                                                    symbol: 'cog',
                                                    size: 'base'
                                                }
                                            },
                                            {
                                                'text': 'Deploy',
                                                'href': '#'
                                            }
                                        ],
                                        'caret': true,
                                        'menuAlignment': 'right'
                                    }
                                }
                            ]
                        }
                    %}
                </div>
            </div>
        </div>
    </div>

    <header class="kx-app__header">
        <h1 class="kx-app__title">{{ pageTitle }}</h1>
    </header>
    <div class="kx-container">
        <div class="kx-row kx-row--gutters">
            <div class="kx-col kx-col--12">
                <div class="kx-card kx-card--skin-default kx-p--small">
                    <div class="kx-row kx-row--gutters">
                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Node ID', element: 'input', type: 'text', value: '117', size: 'base', readonly: true } %}
                                </div>
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Type', element: 'input', type: 'text', value: 'router', size: 'base', readonly: true} %}
                                </div>
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Created by', element: 'input', type: 'text', value: 'Development user', size: 'base', readonly: true} %}
                                </div>
                            </div>
                        </div>
                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Last Latency', element: 'input', type: 'text', value: 'N/a', size: 'base', readonly: true} %}
                                </div>
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Logical Network', element: 'input', type: 'text', value: 'Pacific Drilling', size: 'base', readonly: true } %}
                                </div>
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Device', element: 'input', type: 'text', value: 'Cisco-TK421', size: 'base', readonly: true} %}
                                </div>
                            </div>
                        </div>
                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Created', element: 'input', type: 'text', value: '2017.11.16 13:10:48', size: 'base', readonly: true} %}
                                </div>
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Host Name', element: 'input', type: 'text', value: '117', size: 'base', readonly: true } %}
                                </div>
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Description', element: 'input', type: 'text', value: 'fn2187', size: 'base', readonly: true} %}
                                </div>
                            </div>
                        </div>
                        <div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
                            <div class="kx-row kx-row--gutters">
                                <div class="kx-col kx-col--12">
                                    {% render '@field', { labelTxt: 'Last Seen', element: 'input', type: 'text', value: 'N/A', size: 'base', readonly: true} %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kx-row kx-row--gutters kx-align-items-stretch">
            <div class="kx-col kx-col--12">
                <div class="kx-card kx-card--skin-default">
                    {% render '@table', { fluid: true, theme: 'foam', highlight: true }, true %}
                </div>
            </div>
            <div class="kx-col kx-col--12">
                <div class="kx-card kx-card--skin-default">
                    {% render '@table', { fluid: true, theme: 'foam', highlight: true }, true %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{
  "pageTitle": "Dashboard Title",
  "breadcrumbContext": {
    "theme": "white",
    "items": [
      {
        "txt": "Home",
        "href": "#"
      },
      {
        "txt": "Applications",
        "href": "#"
      },
      {
        "txt": "My App"
      }
    ]
  },
  "navContext": {
    "classes": [
      "kx-nav--main"
    ],
    "header": "Main Navigation",
    "hideHeader": true,
    "search": true,
    "items": [
      {
        "text": "Home",
        "href": "#"
      },
      {
        "text": "Application",
        "href": "#"
      },
      {
        "text": "Item Link text",
        "href": "#"
      }
    ]
  },
  "tabs": {
    "items": [
      {
        "txt": "Foo",
        "href": "#",
        "active": true
      },
      {
        "txt": "Bar",
        "href": "#"
      },
      {
        "txt": "Baz",
        "href": "#"
      }
    ]
  }
}

There are no notes for this item.