<div class="toolbar">

    <div class="row">

        <div class="col-lg-2 text-lg">
            <?= UI::icon("search") ?> &nbsp; Search
        </div>

        <div class="col-xl center">

            <div class="input-group input-group-sm">

                <span class="input-group-text px-3">Title</span>

                <input type="text" placeholder="Search  &nbsp; [alt+t]" id="search_title" class="form-control" accesskey="t" autofocus>

            </div>

        </div>

        <div class="col-xl center">

            <div class="input-group input-group-sm">

                <span class="input-group-text text-sm px-3">Sender</span>

                <input type="text" placeholder="Search  &nbsp; [alt+s]" id="search_sender" class="form-control" accesskey="s" autofocus>

            </div>

        </div>

        <div class="col-xl">

            <div class="input-group input-group-sm">

                <span class="input-group-text px-3">
                    <?= UI::icon("hash") ?>Letter ID &nbsp;
                </span>

                <input type="text" placeholder="Letter ID [alt+X]" id="gotoletter_id" class="form-control" accesskey="X">
                <button class="btn btn-success" id="gotoletter">
                    <?= UI::icon("forward") ?>
                </button>

            </div>

        </div>

    </div>
    <div class="row" hidden>
        <div class="col-6">
            <div class="form-group">
                <div class="row">
                    <div class="col col-w4">
                        <input type="checkbox" class="switch" id="cs" name="cs">
                    </div>
                    <div class="col">
                        <label class="form-check-label w-100" for="cs">
                            <span class=" ">සටහන් සහිත</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>