{#include main fluid=true}
{#style}
html {
min-height: 90vh;
min-width: 100vh;
}

body {
min-height: 90vh;
min-width: 100vh;
}

.row-holder {
padding: 0;
margin: 0;

}

.row:after {
content: "";
display: table;
clear: both;
}

.content-holder {
height: auto;
min-height: 90vh;
}

.link {
background: none;
border: none;
}

.top-margin {
margin-top: 1em;
}

.left-margin {
margin-left: 1em;
}

.left-padding {
padding-left: 1em;
}

.shown {
display: flex;
height: auto;
min-width: 100%;
}

.text-shown {
display: inline;
}

.hidden {
display: none
}

.nav-item:hover > .nav-row > a {
background-color: #005fff;
color: #e9ecef;
}

.nav-item:hover > .nav-row > i {
background-color: #005fff;
color: #e9ecef;
}

#navbar-list > .nav-item:hover {
background-color: #005fff;
color: #e9ecef;
}

.table-hover:hover {
cursor: pointer;
}

.multiselect-container > li > a > label {
padding-left: 15px !important;
}

.page {
min-height: calc(100vh - 135px);
}

.table-hover:hover {
cursor: pointer;
}

.pointer {
cursor: pointer;
}

.no-hover {
background-color: white;
cursor: default;
}

.no-hover:hover {
background-color: white !important;
cursor: default;
}

.icon-rotated {
transform: rotate(90deg);
}

.navbar-brand img {
border-right: 1px solid darkgrey;
padding-right: 10px;
margin-right: 5px;
}

.navbar-brand {
padding: 0;
margin: 0;
}

#nav-menu-panel {
padding: 0px;
}

.float-plus-btn {
position: fixed;
bottom: 60px;
right: 60px;
border-radius: 100%;
height: 50px;
width: 50px;
}

.breadcrumb-item::before {
float: left;
padding-right: 0.5rem;
color: #007bff;
content: "〉";
}

.breadcrumb-item + .breadcrumb-item::before {
float: left;
padding-right: 0.5rem;
color: #007bff;
content: "〉";
}

.breadcrumb {
background-color: #343a40;
margin-bottom: 0;
padding: 0 0 0 5px;
}

.bi-trash-fill:hover {
color: #007bff;
}

.collapse-content {
max-width: 1200px;
}

.thead-multiselect {
background-color: #343a40;
color: white;
border: 0px;
font-weight: bold;
}

.thead-text {
color: white;
}

#msg-table-holder {
min-width: 100%;
}
{/style}
{#styleref}
<link rel="stylesheet" href="{devRootAppend}/resources/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="{devRootAppend}/resources/css/bootstrap-icons.css">
{/styleref}
{#scriptref}
<script src="{devRootAppend}/resources/js/bootstrap-multiselect.js"></script>
<script src="{devRootAppend}/kafka-ui/js/kafka_ui.js" type="module"></script>
{/scriptref}
{#title}Kafka Dev UI{/title}
{#body}
<div class="row row-holder">
    <div
            class="modal fade hidden"
            id="create-msg-modal"
            tabindex="-1"
            aria-hidden="true"
            style="display: none"
    >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create message</h5>
                    <button
                            class="close-modal-btn btn fa fa-close"
                            type="button"
                            aria-label="Close"
                    ></button>
                </div>
                <div class="modal-body container">
                    <div>
                        <div class="d-flex justify-content-start flex-row">
                            <div class="right-margin">
                                <label for="msg-modal-partition-select">Target partition:</label>
                                <select class="custom-select" id="msg-modal-partition-select">
                                    <option value="any" selected>Any</option>
                                </select>
                            </div>
                            <div>
                                <label for="msg-modal-type-select">Type:</label>
                                <select class="custom-select" id="msg-modal-type-select">
                                    <option value="none">None (Tombstone)</option>
                                    <option value="json">JSON</option>
                                    <option value="binary">Binary</option>
                                    <option value="text" selected>Text</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <ul class="nav nav-tabs top-margin" role="tablist">
                        <li class="nav-item waves-effect waves-light">
                            <button class="nav-link active" id="header-key-tab" data-toggle="tab"
                                    href="#header-key-tab-pane" type="button" role="tab"
                                    aria-controls="header-key-tab-pane" aria-selected="true">Key
                            </button>
                        </li>
                        <li class="nav-item waves-effect waves-light">
                            <button class="nav-link" id="header-value-tab" data-toggle="tab"
                                    href="#header-value-tab-pane" type="button" role="tab"
                                    aria-controls="header-value-tab-pane" aria-selected="false">Value
                            </button>
                        </li>
                        <li class="nav-item waves-effect waves-light">
                            <button class="nav-link" id="headers-list-tab" data-toggle="tab"
                                    href="#headers-list-tab-pane" type="button" role="tab"
                                    aria-controls="headers-list-tab-pane" aria-selected="false">Headers
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="header-key-tab-pane" role="tabpanel"
                             aria-labelledby="header-key-tab">
                            <div class="form-floating top-margin">
                                <textarea class="form-control" placeholder="Key"
                                          id="msg-key-textarea"></textarea>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="header-value-tab-pane" role="tabpanel"
                             aria-labelledby="header-value-tab">
                            <div class="form-floating top-margin">
                                <textarea class="form-control" placeholder="Value"
                                          id="msg-value-textarea"></textarea>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="headers-list-tab-pane" role="tabpanel"
                             aria-labelledby="headers-list-tab">

                            <div class="d-flex justify-content-end top-margin">
                                <button type="button" class="btn btn-light" id="add-msg-header-btn">Add</button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button
                            type="button"
                            class="btn btn-secondary close-modal-btn"
                            data-bs-dismiss="modal"
                    >Close
                    </button>
                    <button type="button" class="btn btn-primary" id="send-msg-btn">Send
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div
            class="modal fade hidden"
            id="create-topic-modal"
            tabindex="-1"
            aria-hidden="true"
            style="display: none"
    >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create topic</h5>
                    <button
                            class="close-modal-btn btn fa fa-close"
                            type="button"
                            aria-label="Close"
                    ></button>
                </div>
                <div class="modal-body container">
                    <div id="topic-creation-validation-msg-box" class="alert alert-danger hidden flex-column" role="alert">
                        <span id="topic-name-validation-msg" class="hidden">Topic name should not be empty and should contain only lower- and uppercase letters, numbers, dot (.) and underscore (_) values.</span>
                        <span id="replication-validation-msg" class="hidden">Replication factor should be less or equal to cluster nodes count. Cluster nodes count: <span id="topic-modal-cluster-nodes-placeholder"></span></span>
                    </div>
                    <div>
                        <label for="topic-name-modal-input">Topic name:</label>
                        <input id="topic-name-modal-input" type="text" class="form-control"
                               placeholder="my-awesome-topic"/>
                        <label for="partitions-modal-input" class="top-margin">Partitions:</label>
                        <input id="partitions-modal-input" type="number" class="form-control"
                               placeholder="1 (Default)" min="1"/>
                        <label for="replications-modal-input" class="top-margin">Replications:</label>
                        <input id="replications-modal-input" type="number" class="form-control"
                               placeholder="1 (Default)" min="1"/>

                    </div>
                </div>
                <div class="modal-footer">
                    <button
                            type="button"
                            class="btn btn-secondary close-modal-btn"
                            data-bs-dismiss="modal"
                    >Close
                    </button>
                    <button type="button" class="btn btn-primary" id="create-topic-btn">Create
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div
            class="modal fade hidden"
            id="delete-topic-modal"
            tabindex="-1"
            aria-hidden="true"
            style="display: none"
    >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete topic</h5>
                    <button
                            class="close-modal-btn btn fa fa-close"
                            type="button"
                            aria-label="Close"
                    ></button>
                </div>
                <div class="modal-body container">
                    <span>Are you sure you want to delete topic </span>
                    <b><span id="delete-topic-name-span"></span></b>
                    <span>? </span>
                </div>
                <div class="modal-footer">
                    <button
                            type="button"
                            class="btn btn-secondary close-modal-btn"
                            data-bs-dismiss="modal"
                    >Close
                    </button>
                    <button type="button" class="btn btn-danger" id="delete-topic-btn">Delete topic
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="nav-menu-panel" class="col-md-2" style="background-color:#e9ecef; color:#005fff">
        <ul class="nav flex-column top-margin" id="navbar-list">
        </ul>
    </div>

    <div class="col-md-10 content-holder" style="background-color:#ffffff;">
        <div id="topics-page" class="flex-column">
            <div class="card d-flex flex-fill">
                <table class="table table-hover pointer" id="topics-table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">Topic Name</th>
                            <th scope="col">Id</th>
                            <th scope="col">Partitions count</th>
                            <th scope="col">Number of msg</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <button id="open-create-topic-modal-btn" class="btn btn-primary float-plus-btn"><i
                    class="bi bi-plus"> </i>
            </button>
        </div>
        <div id="topic-messages-page" class="flex-column">
            <div id="topic-msg-content" class="card flex-fill">
                <div class="page d-flex align-content-center justify-content-center">
                    <div id="msg-table-holder" class="align-items-start">
                        <table class="table" id="msg-table">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col">Offset</th>
                                    <th scope="col" class="pointer">
                                        <select id="msg-page-partition-select" class="custom-select" multiple="multiple">
                                            <option>0</option>
                                        </select>
                                    </th>
                                    <th scope="col" class="pointer" id="timestamp-sort-header">Timestamp <i id="timestamp-sort-icon" class="bi bi-chevron-double-down"></i></th>
                                    <th scope="col">Key</th>
                                    <th scope="col">Value</th>
                                    <th><btn id="reload-msg-btn" class="btn"><i class="bi bi-arrow-clockwise thead-text"></i></btn></th>
                                </tr>
                            </thead>
                            <tbody id="msg-table-body">
                            </tbody>
                        </table>
                    </div>
                    <div id="message-load-spinner"
                         class="hidden top-margin align-items-center justify-content-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="d-flex justify-content-end top-margin">
                <ul class="pagination" id="msg-pagination">
                    <li class="page-item previous disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item next"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
            <button id="open-create-msg-modal-btn" class="btn btn-primary float-plus-btn"><i
                    class="bi bi-plus"> </i>
            </button>
        </div>
        <div id="consumer-groups-page">
            <div class="card flex-fill">
                <table class="table table-hover" id="consumer-groups-table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">State</th>
                            <th scope="col">Id</th>
                            <th scope="col">Coordinator</th>
                            <th scope="col">Protocol</th>
                            <th scope="col">Members</th>
                            <th scope="col">Lag(Sum)</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="consumer-groups-details-page">
            <div class="card flex-fill">
                <table class="table table-hover" id="consumer-group-details-table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">Member ID</th>
                            <th scope="col">Host</th>
                            <th scope="col">Partitions</th>
                            <th scope="col">Lag(Sum)</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="access-control-list-page" class="flex-column">
            <div class="card d-flex flex-fill">
                <table class="table table-hover" id="acl-table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">Operation</th>
                            <th scope="col">Principal</th>
                            <th scope="col">Permission</th>
                            <th scope="col">Resource Pattern</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="nodes-page" class="flex-column">
            <div class="card d-flex flex-fill">
                <div class="card-body">
                    <b>Kafka cluster id:&nbsp;</b><span id="cluster-id"></span><br>
                    <b>Controller node (broker):&nbsp;</b><span id="cluster-controller"></span><br>
                    <b>ACL operations:&nbsp;</b><span id="cluster-acl"></span><br>
                </div>
            </div>
            <h3 class="top-margin">Cluster nodes</h3>
            <div class="card flex-fill">
                <table class="table" id="cluster-table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">Host</th>
                            <th scope="col">Port</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="page-load-spinner" class="justify-content-center hidden top-margin">
            <div class="spinner-border text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
</div>
{/body}
{/include}