<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasDeviceStatusDetails"
     aria-labelledby="offcanvasDeviceLabel">
  <div class="offcanvas-header border-bottom">
    <h5 id="offcanvasDeviceLabel" class="offcanvas-title">@lang('Device Details')</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <div class="offcanvas-body px-4">
    <div class="row mb-4">
      <div class="col-4 fw-bold">User:</div>
      <div class="col-8">
        <div class="d-flex flex-column">
          <span id="userName" class="fw-bold text-body"></span>
          <small id="userCode" class="text-muted"></small>
        </div>
      </div>

    </div>
    <hr class="my-3">
    <div class="row mb-4">
      <div class="col-4 fw-bold">Device Type:</div>
      <div class="col-8">
        <span id="deviceType" class="fw-medium"></span>
      </div>
    </div>
    <hr class="my-3">
    <div class="row mb-4">
      <div class="col-4 fw-bold">Brand:</div>
      <div class="col-8">
        <span id="brand" class="fw-medium"></span>
      </div>
    </div>
    <hr class="my-3">
    <div class="row mb-4">
      <div class="col-4 fw-bold">Model:</div>
      <div class="col-8">
        <span id="model"></span>
      </div>
    </div>
    <hr class="my-3">
    <div class="row mb-4">
      <div class="col-4 fw-bold">App Version:</div>
      <div class="col-8">
        <span id="appVersion"></span>
      </div>
    </div>
    <hr class="my-3">
    <div class="row mb-4">
      <div class="col-4 fw-bold">Sdk Version:</div>
      <div class="col-8">
        <span id="sdkVersion"></span>
      </div>
    </div>
    <hr class="my-3">
    <div class="row mb-4">
      <div class="col-4 fw-bold">Created At:</div>
      <div class="col-8">
        <span id="createdAt"></span>
      </div>
    </div>
    </div>
  </div>

</div>



