{% include "header.html" %}
<div style="float: left">
  {% if pasta.content != "" %}
  <button id="copy-text-button" class="small-button" style="margin-right:
  0.5rem">
    Copy Text
  </button>

  {% if args.public_path_as_str() != "" && pasta.pasta_type == "url" %}
  <button id="copy-redirect-button" class="small-button" style="margin-right:
  0.5rem">
    Copy Redirect
  </button>
  {%- endif %}
  <a style="margin-right: 1rem" href="{{ args.public_path_as_str()  }}/raw/{{pasta.id_as_animals()}}">Raw Text
    Content</a>
  {%- endif %} {% if args.qr && args.public_path_as_str() != "" %}
  <a style="margin-right: 1rem" href="{{ args.public_path_as_str()  }}/qr/{{pasta.id_as_animals()}}">QR</a>
  {%- endif %} {% if pasta.editable && !pasta.encrypt_client %}
  <a style="margin-right: 1rem" href="{{ args.public_path_as_str()  }}/edit/{{pasta.id_as_animals()}}">Edit</a>
  {%- endif %}
  {% if pasta.editable %}
  <a style="margin-right: 1rem" href="{{ args.public_path_as_str()  }}/remove/{{pasta.id_as_animals()}}">Remove</a>
  {%- endif %}
 
</div>
<div style="float: right; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
  <a href="{{ args.public_path_as_str()  }}/upload/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
  {% if args.public_path_as_str() != "" %}
  <button id="copy-url-button" class="small-button">Copy URL</button>
  {%- endif %}
  {% if pasta.encrypt_client && pasta.attachments.is_some() %}
  <button id="download-all-encrypted-button" class="small-button">Download all (Decrypted Zip)</button>
  {%- endif %}
  {% if pasta.attachments.is_some() %}
  <select style="margin-left: 1rem" id="view-selector" class="small-button">
    <option value="gallery">Gallery</option>
    <option value="stream">Stream</option>
    <option value="list">List</option>
  </select>
  {%- endif %}
  {% if !pasta.encrypt_client && pasta.attachments.is_some() %}
  <button id="download-all-unencrypted-button" class="small-button" onclick="window.location.href='{{ args.public_path_as_str() }}/archive/{{pasta.id_as_animals()}}'">Download all as ZIP</button>
  {%- endif %}
  
</div>

<br>
<br>
{% if pasta.encrypt_client %}
<span style="margin-left: auto; margin-right: auto; display: flex;
justify-content: center; align-items: center;">
  <div id="decryption">
    {% if pasta.encrypt_client %}
    <label for="password-field" style="margin-bottom: 0.5em;">
      Please enter your key to decrypt this upload. <sup> <a href="{{ args.public_path_as_str() }}/guide#encryption">?</a></sup>
    </label>
    <input class="small-button" placeholder="Key" style="margin-right: 0.5rem" type="password" id="password-field"
      autocomplete="off" />
    {% if pasta.content != "" %}
    <button class="small-button" id="decrypt-button" style="margin-right:
    0.5rem">
      <b>
        Decrypt text
      </b>
    </button>
    {%- endif %}
    {%- endif %}
    {% if pasta.file.is_some() && !pasta.file_embeddable() %}
    <button class="small-button" id="download-button" style="margin-right:
  0.5rem">
      <b>
        Download {{pasta.file.as_ref().unwrap().display_name()}}
        [{{pasta.file.as_ref().unwrap().size}}]
      </b>
    </button>
    {%- endif %}
  </div>
</span>
{%- endif %}

<br>

{% if pasta.content != "" %}
<div class="code-container">
  <div style="clear: both;">
    {% if pasta.extension == "auto" || pasta.encrypt_client %}
    <pre><code id="code">{{pasta.content_escaped()}}</code></pre>
    {% else if args.highlightsyntax %}
    <pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
    {% else %}
    <pre><code id="code">{{pasta.content_not_highlighted()}}</code></pre>
    {%- endif %}
  </div>
</div>
{%- endif %}

{% if pasta.file.is_some() && !pasta.file_embeddable() && !pasta.encrypt_client && !pasta.attachments.is_some() %}
<span style="margin-left: auto; margin-right: auto; display: flex;
    justify-content: center; align-items: center;">
  <p style="font-size: small;">{{pasta.file.as_ref().unwrap().name()}}
    [{{pasta.file.as_ref().unwrap().size}}]</p>
  <a href="{{ args.public_path_as_str()}}/file/{{pasta.id_as_animals()}}" id="download-link">
    <button class="download-button" autofocus>
      Download
    </button>
  </a>
</span>
{%- endif %}


{% if pasta.file.is_some() && pasta.file.as_ref().unwrap().is_image() &&
pasta.file_embeddable() && !pasta.encrypt_client && !pasta.attachments.is_some() %}
<img id="embed" src="{{ args.public_path_as_str()}}/file/{{pasta.id_as_animals()}}" style="max-height: 50vh; max-width: 100%; height: auto; width: auto;" />
<span style="margin-left: auto; margin-right: auto; display: flex;
  justify-content: center; align-items: center;">
  <p style="font-size: small;">{{pasta.file.as_ref().unwrap().name()}}
    [{{pasta.file.as_ref().unwrap().size}}]</p>
  <a href="{{ args.public_path_as_str()      }}/file/{{pasta.id_as_animals()}}" id="download-link" download>
    <button class="download-button" autofocus>
      Download
    </button>
  </a>
</span>
{%- endif %}


{% if pasta.file.is_some() && pasta.file.as_ref().unwrap().is_video() &&
pasta.file_embeddable() && !pasta.encrypt_client && !pasta.attachments.is_some() %}
<video id="embed" controls src="{{ args.public_path_as_str()}}/file/{{pasta.id_as_animals()}}" height="300"></video>
<span style="margin-left: auto; margin-right: auto; display: flex;
  justify-content: center; align-items: center;">
  <p style="font-size: small;">{{pasta.file.as_ref().unwrap().name()}}
    [{{pasta.file.as_ref().unwrap().size}}]</p>
  <a href="{{ args.public_path_as_str()      }}/file/{{pasta.id_as_animals()}}" download id="download-link">
    <button class="download-button">
      Download
    </button>
  </a>
</span>
{%- endif %}

{% if pasta.attachments.is_some() %}
<div id="gallery-view" class="gallery-grid" style="display: grid; margin-top: 2rem;">
    {% if pasta.file.is_some() %}
    <div style="max-width: 100%; overflow: hidden;">
        {% let file = pasta.file.as_ref().unwrap() %}
        {% include "assets/file_card.html" %}
    </div>
    {% endif %}
    {% for file in pasta.attachments.as_ref().unwrap() %}
        {% include "assets/file_card.html" %}
    {% endfor %}
</div>

<div id="list-view" style="display: none; margin-top: 2rem;">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="text-align: left; border-bottom: 1px solid #ccc;">
                <th style="padding: 8px;">Filename</th>
                <th style="padding: 8px;">Size</th>
                <th style="padding: 8px;">Action</th>
            </tr>
        </thead>
        <tbody>
            {% if pasta.file.is_some() %}
            {% let file = pasta.file.as_ref().unwrap() %}
            <tr>
                <td style="padding: 8px;">{{ file.name() }}</td>
                <td style="padding: 8px;">{{ file.size }}</td>
                <td style="padding: 8px;">
                    {% if !pasta.encrypt_client %}
                    <a href="{{ args.public_path_as_str() }}/file/{{pasta.id_as_animals()}}?fname={{ file.url_encoded_name() }}"
                       class="download-link" data-filename="{{ file.name() }}"
                       {% if !pasta.encrypt_server %}download{% endif %}>Download</a>
                    {% else %}<em>Encrypted</em>{% endif %}
                </td>
            </tr>
            {% endif %}
            {% for file in pasta.attachments.as_ref().unwrap() %}
            <tr>
                <td style="padding: 8px;">{{ file.name() }}</td>
                <td style="padding: 8px;">{{ file.size }}</td>
                <td style="padding: 8px;">
                    {% if !pasta.encrypt_client %}
                    <a href="{{ args.public_path_as_str() }}/file/{{pasta.id_as_animals()}}?fname={{ file.url_encoded_name() }}"
                       class="download-link" data-filename="{{ file.name() }}"
                       {% if !pasta.encrypt_server %}download{% endif %}>Download</a>
                    {% else %}<em>Encrypted</em>{% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{%- endif %}

<div>
  {% if args.show_read_stats %} {% if pasta.read_count == 1 %}
  <p style="font-size: small">Read {{pasta.read_count}} time, last
    {{pasta.last_read_time_ago_as_string()}}</p>
  {%- else %}
  <p style="font-size: small">Read {{pasta.read_count}} times, last
    {{pasta.last_read_time_ago_as_string()}}</p>
  {%- endif %} {%- endif %}

</div>

<br>

<script type="text/javascript" src="{{ args.public_path_as_str() }}/static/highlight/highlight.min.js"></script>
<link rel="stylesheet" href="{{ args.public_path_as_str()}}/static/highlight/highlight.min.css">
{% if pasta.encrypt_client && pasta.attachments.is_some() %}
<script type="text/javascript" src="{{ args.public_path_as_str() }}/static/jszip.min.js"></script>
{%- endif %}

<script>
  const copyURLBtn = document.getElementById("copy-url-button")
  const copyTextBtn = document.getElementById("copy-text-button")
  const copyRedirectBtn = document.getElementById("copy-redirect-button")
  var content = `{{ pasta.content_escaped() }}`
  const contentElement = document.getElementById("code");
  const url = (`{{ args.short_path_as_str()}}` === "") ? `{{ args.public_path_as_str() }}/upload/{{pasta.id_as_animals()}}` : `{{ args.short_path_as_str()}}/p/{{pasta.id_as_animals()}}`
  const redirect_url = (`{{ args.short_path_as_str()}}` === "") ? `{{ args.public_path_as_str() }}/url/{{pasta.id_as_animals()}}` : `{{ args.short_path_as_str()}}/u/{{pasta.id_as_animals()}}`

  const te = new TextEncoder();

  // {% if pasta.extension == "auto" && !pasta.encrypt_client %}
  onload = (event) => {
    contentElement.innerHTML = content;
    hljs.highlightAll();
    contentElement.innerHTML =
      wrapStringInCodeLines(contentElement.innerHTML);
  };
  // {% endif %}


  function copyToClipboard(text, buttonElement, originalLabel) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(() => {
        showCopiedFeedback(buttonElement, originalLabel);
      }).catch(err => {
        console.error('Failed to copy using Clipboard API: ', err);
        fallbackCopyTextToClipboard(text, buttonElement, originalLabel);
      });
    } else {
      fallbackCopyTextToClipboard(text, buttonElement, originalLabel);
    }
  }

  function fallbackCopyTextToClipboard(text, buttonElement, originalLabel) {
    var textArea = document.createElement("textarea");
    textArea.value = text;

    // Ensure it's not visible but part of the DOM
    textArea.style.position = "fixed";
    textArea.style.left = "-9999px";
    textArea.style.top = "0";
    document.body.appendChild(textArea);

    textArea.focus();
    textArea.select();

    try {
      var successful = document.execCommand('copy');
      if (successful) {
        showCopiedFeedback(buttonElement, originalLabel);
      } else {
        console.error('Fallback: Copying text command was unsuccessful');
      }
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }

    document.body.removeChild(textArea);
  }

  function showCopiedFeedback(buttonElement, originalLabel) {
    buttonElement.innerHTML = "Copied";
    setTimeout(() => {
      buttonElement.innerHTML = originalLabel;
    }, 1000);
  }

  function escapeHtml(unsafe) {
    return unsafe
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function wrapStringInCodeLines(str) {
    const lines = str.split(/\r?\n/); // split the string into an array of lines
    const wrappedLines = lines.map((line) => `<code-line>${line}</code-line>`); // wrap each line in a "code-line" tag
    return wrappedLines.join("\n"); // join the wrapped lines back into a single string with line breaks
  }

  const decodeEntity = (inputStr) => {
    var textarea = document.createElement("textarea");
    textarea.innerHTML = inputStr;
    return textarea.value;
  }

  if (copyURLBtn) {
    copyURLBtn.addEventListener("click", () => {
      copyToClipboard(url, copyURLBtn, "Copy URL");
    })
  }
  if (copyRedirectBtn) {
    copyRedirectBtn.addEventListener("click", () => {
      copyToClipboard(redirect_url, copyRedirectBtn, "Copy Redirect");
    })
  }

  if (copyTextBtn) {
    copyTextBtn.addEventListener("click", () => {
      const decodeContent = decodeEntity(content)
      copyToClipboard(decodeContent, copyTextBtn, "Copy Text");
    })
  }

  // {% if pasta.encrypt_client %}

  const decryptDiv = document.getElementById('decryption');
  const decryptButton = document.getElementById('decrypt-button');
  const passwordField = document.getElementById("password-field");
  const downloadButton = document.getElementById('download-button');

  // {% if pasta.file.is_some() %}
  // Set up event listener for download link click
  downloadButton.addEventListener('click', async (event) => {
    event.preventDefault(); // prevent default click behavior

    if (passwordField.value.trim() == "") {
      passwordField.focus();
      return false;
    }

    // Fetch encrypted file from server
    const formData = new FormData();

    // {% if pasta.encrypted_key.is_some() %}
    let key = decryptWithPassword(passwordField.value.trim(), "{{ pasta.encrypted_key.as_ref().unwrap() }}");
    // {%- endif %}
    formData.append('password', key);

    const response = await fetch('{{ args.public_path_as_str() }}/secure_file/{{ pasta.id_as_animals() }}', {
      method: 'POST',
      body: formData,
    })

    // {% if pasta.file.is_some() %}
    const encryptedFile = await response.text();

    // Decrypt file contents
    const decryptedContents = decryptFileWithPassword(passwordField.value.trim(), encryptedFile);
    if (!decryptedContents) {
      throw new Error('Failed to decrypt file');
    }

    // Create blob from decrypted file contents
    const decryptedBlob = new Blob([decryptedContents], { type: 'application/octet-stream' });

    // Create data URI for decrypted file
    // const dataUri = `data:application/octet-stream;${encodeURIComponent(decryptedContents)}`;

    // Create temporary anchor element
    const tempAnchorEl = document.createElement('a');
    // tempAnchorEl.href = dataUri;
    tempAnchorEl.href = URL.createObjectURL(decryptedBlob);
    tempAnchorEl.download = '{{pasta.file.as_ref().unwrap().display_name()}}';

    // Programmatically click anchor element to trigger download
    tempAnchorEl.click();

    // {%- endif %}
  });
  // {% endif  %}

  decryptButton.addEventListener("click", () => {
    password = passwordField.value;

    content = contentDecrypted = escapeHtml(decryptWithPassword(password, content));
    if (contentDecrypted) {
      contentElement.innerHTML = contentDecrypted;
      // {% if pasta.extension == "auto" %}
      hljs.highlightAll();
      // {% endif  %}
      contentElement.innerHTML = wrapStringInCodeLines(contentElement.innerHTML);
      // decryptDiv.style.display = 'none';
    }
  });

  function decryptWithPassword(password, encryptedHex) {
    const passwordBytes = aesjs.utils.utf8.toBytes(password.padStart(32, "#"));
    const encryptedBytes = aesjs.utils.hex.toBytes(encryptedHex);
    const aesCtr = new aesjs.ModeOfOperation.ctr(passwordBytes);
    const decryptedBytes = aesCtr.decrypt(encryptedBytes);
    const res = aesjs.utils.utf8.fromBytes(decryptedBytes);

    if (res.endsWith("!0K")) {
      return res.substring(0, res.length - "!0K".length);
    } else {
      return null;
    }
  }

  function decryptFileWithPassword(password, encryptedHex) {
    const passwordBytes = aesjs.utils.utf8.toBytes(password.padStart(32, "#"));
    const encryptedBytes = aesjs.utils.hex.toBytes(encryptedHex);
    const aesCtr = new aesjs.ModeOfOperation.ctr(passwordBytes);
    const decryptedBytes = aesCtr.decrypt(encryptedBytes);
    return decryptedBytes;
  }
// {% endif %}

// {% if pasta.attachments.is_some() %}
  const galleryView = document.getElementById('gallery-view');
  const listView = document.getElementById('list-view');
  const viewSelector = document.getElementById('view-selector');

  function applyViewChange(newView) {
    if (galleryView && listView) {
      galleryView.classList.remove('stream-view');
      if (newView === 'list') {
        galleryView.style.display = 'none';
        listView.style.display = 'block';
      } else if (newView === 'stream') {
        galleryView.style.display = 'grid';
        galleryView.classList.add('stream-view');
        listView.style.display = 'none';
      } else {
        galleryView.style.display = 'grid';
        listView.style.display = 'none';
      }
    }
  }

  const currentView = new URLSearchParams(window.location.search).get('view');
  if (viewSelector) {
    viewSelector.value = currentView || 'gallery';
    viewSelector.addEventListener('change', (e) => {
      const newView = e.target.value;
      const currentUrl = new URL(window.location.href);
      currentUrl.searchParams.set('view', newView);
      window.history.pushState({}, '', currentUrl);
      applyViewChange(newView);
    });
  }
  applyViewChange(currentView || 'gallery');
// {% endif %}

// {% if pasta.encrypt_client && pasta.attachments.is_some() %}
  const downloadAllEncryptedBtn = document.getElementById('download-all-encrypted-button');
  if (downloadAllEncryptedBtn) {
    downloadAllEncryptedBtn.addEventListener('click', async (event) => {
      event.preventDefault();
      if (passwordField.value.trim() == "") { passwordField.focus(); return false; }
      downloadAllEncryptedBtn.textContent = "Processing...";
      downloadAllEncryptedBtn.disabled = true;
      try {
        const zip = new JSZip();
        const links = Array.from(document.querySelectorAll('.download-link'));
        const uniqueLinks = new Map();
        links.forEach(link => {
          const filename = link.getAttribute('data-filename');
          if (!uniqueLinks.has(filename)) uniqueLinks.set(filename, link.href);
        });
        const promises = [];
        for (const [filename, url] of uniqueLinks) {
          promises.push(fetch(url)
            .then(r => r.arrayBuffer())
            .then(buf => {
              const hex = Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, "0")).join("");
              const dec = decryptFileWithPassword(passwordField.value.trim(), hex);
              if (dec) zip.file(filename, dec);
            }));
        }
        await Promise.all(promises);
        const content = await zip.generateAsync({type:"blob"});
        const a = document.createElement('a');
        a.href = URL.createObjectURL(content);
        a.download = "{{pasta.id_as_animals()}}.zip";
        a.click();
      } catch (e) {
        alert("Failed to generate zip. See console.");
        console.error(e);
      }
      downloadAllEncryptedBtn.textContent = "Download all (Decrypted Zip)";
      downloadAllEncryptedBtn.disabled = false;
    });
  }
// {% endif %}
</script>

<style>
  code-line {
    counter-increment: line;
    text-align: right;
    float: left;
    clear: left;
  }

  code-line::before {
    content: counter(line);
    display: inline-block;
    padding-left: auto;
    margin-left: auto;
    text-align: left;
    width: 1.8rem;
    border-right: 1px solid lightgrey;
    color: grey;
    margin-right: 0.4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #code {
    min-height: 2rem;
  }

  #embed {
    background-color: #b0b9cc0d;
    border-radius: 6px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    max-height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .download-button {
    margin-left: 1rem;
    font-size: small;
    padding: 4px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    cursor: pointer;
  }

  .code-container {
    position: relative;
  }

  .hidden {
    display: none;
  }

  #view-selector {
    padding-right: 2rem;
  }

  .small-button {
    font-size: small;
    padding: 4px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    cursor: pointer;
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }

  .file-card {
    background-color: var(--background-body);
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .embed-media {
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .gallery-grid .embed-media {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .stream-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .stream-view .file-card {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .stream-view .embed-media {
    aspect-ratio: auto;
    object-fit: contain;
    max-height: 80vh;
  }
</style>

{% if !args.pure_html %}
<style>
  #decryption {
    background-color: #b0b9cc0d;
    border-radius: 6px;
    padding: 10px;
    width: fit-content;
  }
</style>
{% endif %}

{% include "footer.html" %}