bitvid/components/subscription-history-modal.html

<div
  id="subscriptionHistoryModal"
  class="bv-modal hidden"
  role="dialog"
  aria-modal="true"
  aria-labelledby="subscriptionHistoryTitle"
  tabindex="-1"
  data-ds="new"
>
  <div class="bv-modal-backdrop"></div>

  <div
    class="bv-modal__panel w-full max-w-4xl h-4/5 rounded-xl border border-border/50 bg-surface shadow-2xl overflow-hidden flex flex-col"
    tabindex="-1"
  >
    <!-- Modal Header -->
    <div class="modal-header border-b border-border/60 p-4 flex items-center justify-between bg-surface-2">
      <h2 id="subscriptionHistoryTitle" class="text-lg font-bold text-text">Subscription History</h2>
      <button id="closeSubscriptionHistoryModal" class="modal-close btn-ghost btn-icon p-1 rounded-md text-muted hover:text-text focus-ring">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <!-- Modal Body -->
    <div class="flex flex-1 overflow-hidden">
      <!-- Left Column: List -->
      <div class="w-full md:w-1/3 border-r border-border/60 flex flex-col bg-surface-1">
        <div class="p-3 border-b border-border/60 bg-surface-2/50">
          <p class="text-xs text-muted font-medium uppercase tracking-wider">Backups & Versions</p>
        </div>
        <div class="flex-1 overflow-y-auto p-2" id="subscriptionHistoryListContainer">
          <ul id="subscriptionHistoryList" class="space-y-1"></ul>

          <div id="subscriptionHistoryLoading" class="hidden p-4 text-center">
            <span class="status-spinner status-spinner--inline"></span>
            <span class="text-sm text-muted ml-2">Loading history...</span>
          </div>

          <div id="subscriptionHistoryEmpty" class="hidden p-8 text-center flex flex-col items-center justify-center h-full text-muted">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mb-3 opacity-20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <p class="text-sm">No backups found.</p>
          </div>
        </div>
      </div>

      <!-- Right Column: Details -->
      <div class="hidden md:flex md:w-2/3 flex-col bg-surface relative">
        <!-- Empty State for Details -->
        <div id="subscriptionHistoryDetailsEmpty" class="absolute inset-0 flex flex-col items-center justify-center text-muted p-8 text-center">
          <div class="p-4 rounded-full bg-surface-2 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
          </div>
          <p class="text-base font-medium text-text">Select a backup to view details</p>
          <p class="text-sm mt-1 max-w-xs">You can preview the channels in a backup before restoring it.</p>
        </div>

        <!-- Content State -->
        <div id="subscriptionHistoryDetailsContent" class="hidden flex-col h-full w-full">
          <div class="p-4 border-b border-border/60 bg-surface flex items-center justify-between gap-4">
            <div>
              <h3 id="subscriptionHistorySelectedDate" class="text-base font-bold text-text"></h3>
              <p id="subscriptionHistorySelectedMeta" class="text-xs text-muted"></p>
            </div>
            <div class="flex items-center gap-2">
               <span id="subscriptionHistorySelectedBadge" class="badge" data-variant="surface"></span>
            </div>
          </div>

          <div class="flex-1 overflow-y-auto p-4">
             <div id="subscriptionHistoryDecrypting" class="hidden flex flex-col items-center justify-center h-40 text-muted">
                <span class="status-spinner mb-2"></span>
                <span class="text-sm">Decrypting content...</span>
             </div>
             <ul id="subscriptionHistorySelectedChannels" class="grid grid-cols-1 sm:grid-cols-2 gap-3 pb-4"></ul>
          </div>

          <div class="p-4 border-t border-border/60 bg-surface-2/30 flex items-center justify-between gap-3">
            <div class="text-xs text-muted">
              Actions apply to this specific backup.
            </div>
            <div class="flex gap-3">
              <button id="subscriptionHistoryRebroadcastBtn" type="button" class="btn-ghost focus-ring text-sm">
                Rebroadcast
              </button>
              <button id="subscriptionHistoryRestoreBtn" type="button" class="btn focus-ring text-sm">
                Restore as Active
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>