<style>
/* ფონის ფენა (გამჭვირვალე) */
.source-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1000;
}

.source-overlay.source-active {
  opacity: 1;
  pointer-events: auto;
}

/* მოდალი */
.source-modal {
  width: 520px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0,0,0,0.6);
  transform: translateY(-6px);
  opacity: 0;
  transition: all 0.22s ease;
}

.source-overlay.source-active .source-modal {
  transform: translateY(0);
  opacity: 1;
}

/* ჰედერი */
.source-header {
  background: linear-gradient(#1c1c1c, #000);
  color: #fff;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.source-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}

.source-title::before {
  content: "⚠";
}

/* დახურვის ღილაკი */
.source-close {
  background: #c40000;
  color: #fff;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s ease, box-shadow 0.15s ease;
}

.source-close:hover {
  background: #a80000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.source-close:active {
  /* აღარ იზრდება/პატარავდება */
}

.source-close:active {
  transform: scale(0.97);
}

/* კონტენტი */
.source-body {
  padding: 14px 16px 16px;
}

/* ფორმა */
.source-group {
  margin-bottom: 12px;
}

.source-group label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.source-group input {
  width: 100%;
  height: 34px;
  padding: 6px 8px;
  border: 1px solid #cfcfcf;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 0;
}

.source-group input:focus {
  outline: none;
  border-color: #4f8cff;
}
</style>

<!-- ღილაკი -->
<button onclick="openSource_$ID$()" style="position: relative;top: -97px;float: right;left: -9px;color: #000000;background-color: unset;font-size: 17px;"> წყაროს ნახვა </button>

<!-- მოდალი -->
<div class="source-overlay" id="sourceBox_$ID$">
  <div class="source-modal">
  <div class="source-header">
  <div class="source-title">წყაროს ინფორმაცია</div>
  <button class="source-close" onclick="closeSource_$ID$()">დახურვა</button>
  </div>

  <div class="source-body">
  <div class="source-group">
  <label>მასალის დასახელება</label>
  <input type="text" id="ucTitle_$ID$" readonly>
  </div>

  <div class="source-group">
  <div class="source-group"> <label>წყაროს ბმული</label> <input type="text" value="$OTHER1$" readonly style="cursor:pointer;" onclick="window.open('$OTHER1$', '_blank');"> </div>
  </div>

  <div class="source-group">
  <label>დაამატა</label>
  <input type="text" id="ucUser_$ID$" readonly>
  </div>
  </div>
  </div>
</div>

<script>
function openSource_$ID$() {
  document.getElementById('ucTitle_$ID$').value = "$TITLE$";
  document.getElementById('ucUser_$ID$').value = "$USERNAME$";
  document.getElementById('sourceBox_$ID$').classList.add('source-active');
}

function closeSource_$ID$() {
  document.getElementById('sourceBox_$ID$').classList.remove('source-active');
}
</script>