<section>
  <h3>Nostr</h3>
  <h4 class="mb-0">Public Key</h4>
  <div data-controller="settings--nostr-pubkey"
       data-settings--nostr-pubkey-user-address-value="<%= current_user.address %>"
       data-settings--nostr-pubkey-shared-secret-value="<%= session[:shared_secret] %>"
       data-settings--nostr-pubkey-pubkey-hex-value="<%= current_user.nostr_pubkey %>">

    <p class="<%= current_user.nostr_pubkey.present? ? '' : 'hidden' %> mt-2 flex gap-1">
      <input type="text" value="<%= current_user.nostr_pubkey_bech32 %>" disabled
             data-settings--nostr-pubkey-target="pubkeyBech32Input"
             name="nostr_public_key" class="relative grow" />
      <%= link_to nostr_pubkey_settings_path,
            class: 'btn-md btn-outline text-red-700 relative shrink-0',
            data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } do %>
        Remove
      <% end %>
    </p>

    <% if current_user.nostr_pubkey.present? %>
    <div class="rounded-md bg-blue-50 p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm text-blue-800">
            Your user address <strong><%= current_user.address %></strong> is
            also a Nostr address now. Use your favorite Nostr app, or for
            example <a href="http://metadata.nostr.com" target="_blank"
              class="underline">metadata.nostr.com</a>, to add this
            <strong>NIP-05</strong> address to your public profile.
          </p>
        </div>
      </div>
    </div>
    <% else %>
    <p class="my-4">
      If you use any apps on the Nostr network, you can verify your public key
      with us in order to enable Nostr-specific features for your account.
    </p>
    <% end %>

    <div data-settings--nostr-pubkey-target="noExtension"
         class="hidden rounded-md bg-blue-50 p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-3">
          <h3 class="mb-0 text-sm font-bold text-blue-800">
            No browser extension found
          </h3>
          <div class="mt-2 mb-0 text-sm text-blue-800">
            <p>
              We recommend Alby, which you can also use for your Lightning
              Wallet.
            </p>
          </div>
          <div class="mt-4">
            <div class="-mx-2 -my-1.5 flex">
              <a href="https://getalby.com" target="_blank"
                 class="rounded-md bg-blue-50 px-2 py-1.5 text-sm
                        font-bold text-blue-800 hover:bg-blue-100
                        focus:outline-none focus:ring-2 focus:ring-blue-600
                        focus:ring-offset-2 focus:ring-offset-blue-50">
                Get Alby
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <% unless current_user.nostr_pubkey.present? %>
    <p class="mt-8">
      <button class="btn-md btn-gray w-full sm:w-auto" disabled
              data-settings--nostr-pubkey-target="setPubkey"
              data-action="settings--nostr-pubkey#setPubkey">
        Get public key from browser extension
      </button>
    </p>
    <% end %>
  </div>
</section>
