<?= canAddDevice($items) ? show_page_header('devices', ['page-options' => 'add-new', 'page-options-type' => 'ajax-modal'], 'user') : ''; ?>

<div class="row g-2">
  <?php if (!empty($items)) :
    foreach ($items as $item) :
  ?>
      <div class="col-12">
        <div class="card border-0 custom-simple-card" style="border-radius: 8px; background-color: #ffffff;">
          <div class="card-body p-3">
            <div class="row align-items-center g-2">
              
              <div class="col-md-4 col-12">
                <div class="d-flex align-items-center gap-2 wrap flex-wrap">
                  <span class="fw-semibold text-dark" style="font-size: 14px;"><?= $item->device_name; ?></span>
                  <?= show_device_status($item->device_key, session('uid')) ?>
                </div>
                <div class="mt-1">
                  <?php if (!empty($item->device_ip)) : ?>
                    <span class="text-muted d-block" style="font-size: 11px;">
                      <i class="fas fa-link me-1 text-success"></i> Connected on <?= time_format($item->updated_at) ?>
                    </span>
                  <?php else : ?>
                    <span class="text-muted d-block style" style="font-size: 11px;">
                      <i class="fas fa-unlink me-1 text-danger"></i> No device connected
                    </span>
                  <?php endif; ?>
                </div>
              </div>

              <div class="col-md-8 col-12 d-flex justify-content-md-end justify-content-start">
                <div class="input-group input-group-custom" style="max-width: 360px; width: 100%;">
                  <span class="input-group-text bg-light border-0 text-muted small px-2.5" style="font-size: 11px; color: #64748b !important;">KEY</span>
                  <input readonly type="text" class="form-control text-to-cliboard bg-light border-0 px-2.5" value="<?= $item->device_key; ?>" style="font-size: 12px; font-family: monospace; color: #334155; height: 34px;">
                  
                  <span class="input-group-text my-copy-btn cursor-pointer bg-light border-0 text-muted px-2.5" style="border-left: 1px solid #e2e8f0 !important;">
                    <i class="fas fa-copy" style="font-size: 13px;"></i>
                  </span>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
  <?php endforeach;
  else : echo show_empty_item();
  endif; ?>
</div>

<style>
    /* সিম্পল বর্ডার গাইডলাইন (কোনো ভারী শ্যাডো নেই) */
    .custom-simple-card {
        border: 1px solid #e2e8f0 !important;
    }
    
    /* ইনপুট গ্রুপ মডিফিকেশন */
    .input-group-custom {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        overflow: hidden;
        background-color: #f8fafc;
    }
    .input-group-custom .form-control:focus {
        box-shadow: none;
        background-color: #f8fafc;
    }
    .input-group-custom .my-copy-btn:hover {
        color: #3b82f6 !important;
    }
    .cursor-pointer {
        cursor: pointer;
    }
</style>

<script type="text/javascript">
  // আনবাইল্ড করে ক্লিক ইভেন্ট যেন ডুপ্লিকেট না হয়
  $(".my-copy-btn").unbind('click').click(function() {
    let vl = $(this).prev('.text-to-cliboard').val();
    let params = {
      'type': 'text',
      'value': vl,
    };
    copyToClipBoard(params, 'toast', 'Device Key Copied Successfully')
  });
</script>
