<style>
    .no-wrap {
        white-space: nowrap;
    }

    .header-divider {
        width: 1px;
        height: 22px;
        background-color: rgba(0, 0, 0, 0);
        margin: 0 10px;
    }

    .gap-2 {
        gap: 1.5rem !important;
    }

    .top-stat-text,
    .top-fax-text {
        color: #000;
        max-width: 520px;
        /* white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;
             max-width: 400px; */
        font-size: 0.8rem;
    }

    /* 애니메이션 클래스 */
    .slide-in-left {
        animation: slideInLeft 0.5s ease-out;
    }

    @keyframes slideInLeft {
        from {
            transform: translateX(-40px);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>

<div class="app-header header-shadow">
    <div class="app-header__logo">
        <div class="logo-src"></div>
        <div class="header__pane ms-auto">
            <div>
                <button type="button" class="hamburger close-sidebar-btn hamburger--elastic"
                    data-class="closed-sidebar">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </button>
            </div>
        </div>
    </div>
    <div class="app-header__mobile-menu">
        <div>
            <button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
        </div>
    </div>
    <div class="app-header__menu">
        <span>
            <button type="button" class="btn-icon btn-icon-only btn btn-primary btn-sm mobile-toggle-header-nav">
                <span class="btn-icon-wrapper">
                    <i class="fa fa-ellipsis-v fa-w-6"></i>
                </span>
            </button>
        </span>
    </div>
    <div class="app-header__content">
        <div class="app-header-left d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-2">
            <!-- 통계 -->
            <div class="d-flex align-items-center gap-2 flex-nowrap">
                <input type="date" class="form-control form-control-sm iText hasDatepicker" name="statDate"
                    id="statDate" style="width: 120px;">
                <span onclick="goStats()" class="text-muted" style="cursor:pointer;">조회</span>
                <span id="statView" class="top-stat-text">
                </span>
            </div>

            <div class="header-divider d-none d-lg-block"></div>

            <!-- 팩스 -->
            <div class="d-flex align-items-center gap-2">
                <span onclick="clickFax()" class="text-muted" style="cursor:pointer;">팩 스</span>
                <span id="fax1" class="top-fax-text">
                </span>
            </div>
        </div>
        <!-- <div class="app-header-left">
            <div class="search-wrapper">
                <div class="input-holder">
                    <input type="text" class="search-input" placeholder="Type to search">
                    <button class="search-icon"><span></span></button>
                </div>
                <button class="btn-close"></button>
            </div>
            <ul class="header-menu nav">
                <li class="nav-item">
                    <a href="javascript:void(0);" class="nav-link">
                        <i class="nav-link-icon fa fa-database"> </i>
                        Statistics
                    </a>
                </li>
                <li class="btn-group nav-item">
                    <a href="javascript:void(0);" class="nav-link">
                        <i class="nav-link-icon fa fa-edit"></i>
                        Projects
                    </a>
                </li>
                <li class="dropdown nav-item">
                    <a href="javascript:void(0);" class="nav-link">
                        <i class="nav-link-icon fa fa-cog"></i>
                        Settings
                    </a>
                </li>
            </ul>
        </div> -->

        <div class="app-header-right">
            <div class="header-btn-lg pe-0">
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left">
                            <div class="btn-group">
                                <a data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="p-0 btn">
                                    <img width="42" class="rounded-circle" src="/architectui/assets/images/letter-c.png"
                                        alt="">
                                    <i class="fa fa-angle-down ms-2 opacity-8"></i>
                                </a>
                                <div tabindex="-1" role="menu" aria-hidden="true"
                                    class="dropdown-menu dropdown-menu-right">
                                    <!-- <button type="button" tabindex="0" class="dropdown-item">User Account</button>
                                    <button type="button" tabindex="0" class="dropdown-item">Settings</button>
                                    <h6 tabindex="-1" class="dropdown-header">Header</h6>
                                    <button type="button" tabindex="0" class="dropdown-item">Actions</button>
                                    <div tabindex="-1" class="dropdown-divider"></div> -->
                                    <button type="button" tabindex="0" class="dropdown-item"
                                        onclick="location.href='/logout'">로그아웃</button>
                                </div>
                            </div>
                        </div>

                        <div class="widget-content-left  ms-3 header-user-info">
                            <div class="widget-heading">
                                <?= session('usr_nm'); ?>
                            </div>
                            <div class="widget-subheading">
                                [ <?= session('usr_id'); ?> | <?= session('dept_nm'); ?> ] 님
                            </div>
                        </div>
                        <!-- <div class="widget-content-right header-user-info ms-3">
                            <button type="button" class="btn-shadow p-1 btn btn-primary btn-sm show-toastr-example">
                                <i class="fa text-white fa-calendar pe-1 ps-1"></i>
                            </button>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>