<commit_before>/* global Android */

const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../common/assets');
const { bytes, copyToClipboard, list, percent, timeLeft } = require('../utils');
const expiryOptions = require('./expiryOptions');

function expiryInfo(translate, archive) {
  const l10n = timeLeft(archive.expiresAt - Date.now());
  return raw(
    translate('frontPageExpireInfo', {
      downloadCount: translate('downloadCount', {
        num: archive.dlimit - archive.dtotal
      }),
      timespan: translate(l10n.id, l10n)
    })
  );
}

function password(state) {
  const MAX_LENGTH = 32;

  return html`
    <div class="my-2 px-4-device">
      <div class="checkbox inline-block mr-3">
        <input
          id="add-password"
          type="checkbox"
          ${state.password ? 'checked' : ''}
          autocomplete="off"
          onchange="${togglePasswordInput}"
        />
        <label for="add-password">
          ${state.translate('addPasswordMessage')}
        </label>
      </div>
      <input
        id="password-input"
        class="${
          state.password ? '' : 'invisible'
        } border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
        autocomplete="off"
        maxlength="${MAX_LENGTH}"
        type="password"
        oninput="${inputChanged}"
        onfocus="${focused}"
        placeholder="${state.translate('unlockInputPlaceholder')}"
        value="${state.password || ''}"
      />
      <label
        id="password-msg"
        for="password-input"
        class="block text-xs text-grey-darker mt-1"
      ></label>
    </div>
  `;

  function togglePasswordInput(event) {
    event.stopPropagation();
    const checked = event.target.checked;
    const input = document.getElementById('password-input');
    if (checked) {
      input.classList.remove('invisible');
      input.focus();
    } else {
      input.classList.add('invisible');
      input.value = '';
      document.getElementById('password-msg').textContent = '';
      state.password = null;
    }
  }

  function inputChanged() {
    const passwordInput = document.getElementById('password-input');
    const pwdmsg = document.getElementById('password-msg');
    const password = passwordInput.value;
    const length = password.length;

    if (length === MAX_LENGTH) {
      pwdmsg.textContent = state.translate('maxPasswordLength', {
        length: MAX_LENGTH
      });
    } else {
      pwdmsg.textContent = '';
    }
    state.password = password;
  }

  function focused(event) {
    event.preventDefault();
    const el = document.getElementById('password-input');
    if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
      el.placeholder = '';
    }
  }
}

function fileInfo(file, action) {
  return html`
    <send-file class="flex flex-row items-center p-3 w-full">
      <img class="" src="${assets.get('blue_file.svg')}"/>
      <p class="ml-4 w-full">
        <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
        <div class="text-xs font-normal opacity-75 pt-1">${bytes(
          file.size
        )}</div>
        <div class="hidden">${file.type}</div>
      </p>
      ${action}
    </send-file>`;
}

function archiveDetails(translate, archive) {
  if (archive.manifest.files.length > 1) {
    return html`
      <details
        class="w-full pb-1 overflow-y-scroll"
        ${archive.open ? 'open' : ''}
        ontoggle="${toggled}"
      >
        <summary
          >${
            translate('fileCount', {
              num: archive.manifest.files.length
            })
          }</summary
        >
        ${
          list(
            archive.manifest.files.map(f => fileInfo(f)),
            'list-reset h-full'
          )
        }
      </details>
    `;
  }
  function toggled(event) {
    event.stopPropagation();
    archive.open = event.target.open;
  }
}

module.exports = function(state, emit, archive) {
  const copyOrShare =
    typeof window.Android !== 'object'
      ? html`
          <button
            class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
            onclick=${copy}
          >
            <img src="${assets.get('copy-16.svg')}" class="mr-2" /> ${<commit_msg>Switch to using utils.browserName<commit_after>/* global Android */

const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../common/assets');
const {
  browserName,
  bytes,
  copyToClipboard,
  list,
  percent,
  timeLeft
} = require('../utils');
const expiryOptions = require('./expiryOptions');

function expiryInfo(translate, archive) {
  const l10n = timeLeft(archive.expiresAt - Date.now());
  return raw(
    translate('frontPageExpireInfo', {
      downloadCount: translate('downloadCount', {
        num: archive.dlimit - archive.dtotal
      }),
      timespan: translate(l10n.id, l10n)
    })
  );
}

function password(state) {
  const MAX_LENGTH = 32;

  return html`
    <div class="my-2 px-4-device">
      <div class="checkbox inline-block mr-3">
        <input
          id="add-password"
          type="checkbox"
          ${state.password ? 'checked' : ''}
          autocomplete="off"
          onchange="${togglePasswordInput}"
        />
        <label for="add-password">
          ${state.translate('addPasswordMessage')}
        </label>
      </div>
      <input
        id="password-input"
        class="${
          state.password ? '' : 'invisible'
        } border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
        autocomplete="off"
        maxlength="${MAX_LENGTH}"
        type="password"
        oninput="${inputChanged}"
        onfocus="${focused}"
        placeholder="${state.translate('unlockInputPlaceholder')}"
        value="${state.password || ''}"
      />
      <label
        id="password-msg"
        for="password-input"
        class="block text-xs text-grey-darker mt-1"
      ></label>
    </div>
  `;

  function togglePasswordInput(event) {
    event.stopPropagation();
    const checked = event.target.checked;
    const input = document.getElementById('password-input');
    if (checked) {
      input.classList.remove('invisible');
      input.focus();
    } else {
      input.classList.add('invisible');
      input.value = '';
      document.getElementById('password-msg').textContent = '';
      state.password = <PASSWORD>;
    }
  }

  function inputChanged() {
    const passwordInput = document.getElementById('password-input');
    const pwdmsg = document.getElementById('password-msg');
    const password = passwordInput.value;
    const length = password.length;

    if (length === MAX_LENGTH) {
      pwdmsg.textContent = state.translate('maxPasswordLength', {
        length: MAX_LENGTH
      });
    } else {
      pwdmsg.textContent = '';
    }
    state.password = password;
  }

  function focused(event) {
    event.preventDefault();
    const el = document.getElementById('password-input');
    if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
      el.placeholder = '';
    }
  }
}

function fileInfo(file, action) {
  return html`
    <send-file class="flex flex-row items-center p-3 w-full">
      <img class="" src="${assets.get('blue_file.svg')}"/>
      <p class="ml-4 w-full">
        <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
        <div class="text-xs font-normal opacity-75 pt-1">${bytes(
          file.size
        )}</div>
        <div class="hidden">${file.type}</div>
      </p>
      ${action}
    </send-file>`;
}

function archiveDetails(translate, archive) {
  if (archive.manifest.files.length > 1) {
    return html`
      <details
        class="w-full pb-1 overflow-y-scroll"
        ${archive.open ? 'open' : ''}
        ontoggle="${toggled}"
      >
        <summary
          >${
            translate('fileCount', {
              num: archive.manifest.files.length
            })
          }</summary
        >
        ${
          list(
            archive.manifest.files.map(f => fileInfo(f)),
            'list-reset h-full'
          )
        }
      </details>
    `;
  }
  function toggled(event) {
    event.stopPropagation();
    archive.open = event.target.open;
  }
}

module.exports = function(state, emit, archive) {
  const copyOrShare =
    browserName() !== 'android-app'
      ? html`
          <button
            class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
            onclick=${copy}
          >
            <img src="${assets.get('copy-16.svg')}" class="mr-2" /> ${
{'fraction_non_alphanumeric': 0.1559040590405904, 'fraction_numerical': 0.006457564575645757, 'mean_word_length': 2.339622641509434, 'pattern_counts': {'":': 0, '<': 58, '<?xml version=': 0, '>': 62, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '195871', 'n_tokens_mistral': 2602, 'n_tokens_neox': 2574, 'n_words': 473}