<section>
  <h3>Profile</h3>
  <div class="mb-6">
    <p class="mb-2">
      <%= label :user_address, 'User address', class: 'font-bold' %>
    </p>
    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:w-3/5">
      <input type="text" id="user_address" class="grow"
             value=<%= @user.address %> disabled="disabled"
             data-clipboard-target="source" />
      <button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
              data-clipboard-target="trigger" data-action="clipboard#copy"
              title="Copy to clipboard">
        <span class="content-initial">
          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600  h-4 w-4 inline" } %>
        </span>
        <span class="content-active hidden">
          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600  h-4 w-4 inline" } %>
        </span>
      </button>
    </p>
    <p class="text-sm text-gray-500">
      Your user address for Chat and Lightning Network.
    </p>
  </div>
  <%= form_for(@user, url: setting_path(:profile), html: { :method => :put }) do |f| %>
    <%= render FormElements::FieldsetComponent.new(tag: "div", title: "Display name") do %>
      <%= f.text_field :display_name, class: "w-full sm:w-3/5" %>
      <% if @validation_errors.present? && @validation_errors[:display_name].present? %>
        <p class="error-msg mt-2"><%= @validation_errors[:display_name].first %></p>
      <% end %>
    <% end %>

    <label class="block">
      <p class="font-bold mb-1">
        Avatar
      </p>
      <p class="text-gray-500">
        Default profile picture
      </p>
      <div class="flex items-center gap-6">
        <% if current_user.avatar.present? %>
        <p class="flex-none">
          <%= image_tag "data:image/jpeg;base64,#{current_user.avatar}", class: "h-24 w-24 rounded-lg" %>
        </p>
        <% end %>
        <div class="grow">
          <p class="mb-2">
          <%= f.file_field :avatar, class: "" %>
          <p class="text-sm text-gray-500">
            JPEG or PNG image, not larger than 1 megabyte
          </p>
          <% if @validation_errors.present? && @validation_errors[:avatar].present? %>
            <p class="error-msg mb-2"><%= @validation_errors[:avatar].first %></p>
          <% end %>
        </div>
      </div>
    </label>

    <p class="mt-8 pt-6 border-t border-gray-200 text-right">
      <%= f.submit 'Save', class: "btn-md btn-blue w-full md:w-auto" %>
    </p>
  <% end %>
</section>
