<?php

use Fisharebest\Webtrees\I18N;

/**
 * @var string      $id
 * @var string|null $name
 * @var bool|null   $required
 * @var string|null $autocomplete
 * @var string|null $pattern
 * @var string|null $placeholder
 * @var string|null $value
 */

?>
<div class="input-group">
    <input
        autocomplete="<?= ($autocomplete ?? 'one-time-code') ?>"
        class="form-control"
        id="<?= e($id) ?>"
        name="<?= e($name ?? $id) ?>"
        <?= ($pattern ?? '') !== '' ? 'pattern="' . e($pattern) . '"' : '' ?>
        placeholder="<?= e($placeholder ?? '') ?>"
        <?= ($required ?? false) ? 'required="required"' : '' ?>
        type="password"
        <?= ($value ?? '') !== '' ? 'value="' . e($value) . '"' : '' ?>
    >
    <button
        id="<?= e($id) ?>-toggle"
        class="btn btn-outline-secondary"
        type="button"
        data-wt-hide-password-text="<?= e(I18N::translate('hide')) ?>"
        data-wt-show-password-text="<?= e(I18N::translate('show')) ?>"
        data-wt-show-password-title="<?= e(I18N::translate('Show password')) ?>"
        data-wt-hide-password-title="<?= e(I18N::translate('Hide password')) ?>"
        title="<?= e(I18N::translate('Show password')) ?>"
    >
        <?= e(I18N::translate('show')) ?>
    </button>
</div>

<script>
  document.getElementById('<?= e($id) ?>-toggle')
    .addEventListener('click', function (event) {
      const element = event.target;
      const password_field = document.getElementById('<?= e($id) ?>');
      if (password_field.type === 'password') {
        password_field.type = 'text';
        element.title = element.dataset.wtHidePasswordTitle;
        element.innerHTML = element.dataset.wtHidePasswordText;
      } else {
        password_field.type = 'password';
        element.title = element.dataset.wtShowPasswordTitle;
        element.innerHTML = element.dataset.wtShowPasswordText;
      }
      password_field.focus();
    });
</script>
