<!DOCTYPE html>
<html data-theme="docuseal" lang="en">
  <head>
    <%= render 'layouts/head_tags' %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <% if ENV['ROLLBAR_CLIENT_TOKEN'] %>
      <meta name="rollbar-token" content="<%= ENV.fetch('ROLLBAR_CLIENT_TOKEN', nil) %>">
      <%= javascript_pack_tag 'rollbar', 'draw', defer: true %>
    <% else %>
      <%= javascript_pack_tag 'draw', defer: true %>
    <% end %>
    <%= stylesheet_pack_tag 'form', media: 'all' %>
    <%= render 'shared/posthog' if ENV['POSTHOG_TOKEN'] %>
  </head>
  <body>
    <% field = (@submitter.submission.template_fields || @submitter.template.fields).find { |f| f['type'] == 'signature' && f['uuid'].starts_with?(params[:f]) } %>
    <draw-signature data-slug="<%= params[:slug] %>" data-color="<%= field.dig('preferences', 'color') %>" class="flex items-center h-screen p-2 justify-center">
      <%= form_for '', url: submit_form_path(params[:slug]), html: { style: 'max-width: 900px; width: 100%; margin-bottom: 120px' }, method: :put do |f| %>
        <input value="" type="hidden" name="values[<%= field['uuid'] %>]">
        <div class="font-semibold text-4xl text-center w-full mb-2">
          <%= t('draw_signature') %>
        </div>
        <div class="w-full bg-white rounded-2xl border relative" style="height: 300px">
          <canvas class="w-full"></canvas>
          <button aria-label="Clear" class="btn btn-ghost btn-sm font-medium top-0 right-0 absolute mt-1 mr-1">
            <%= svg_icon('reload', class: 'w-5 h-5') %>
            <span class="inline"><%= t('clear') %></span>
          </button>
        </div>
        <div class="mt-4">
          <button disabled class="base-button w-full">
            <%= t('submit') %>
          </button>
          <%= f.button button_title(title: t('submit')), class: 'base-button w-full', style: 'display: none' %>
        </div>
      <% end %>
      <div id="success" class="text-center p-2 hidden" style="margin-bottom: 100px">
        <div class="flex items-center space-x-1 items-center justify-center text-2xl font-semibold mb-2">
          <%= svg_icon('circle_check', class: 'text-green-600') %>
          <span>
            <%= t('signature_uploaded') %>
          </span>
        </div>
        <div>
          <%= t('return_back_to_your_desktop_device_to_complete_the_form_or_continue_on_mobile_html', link: submit_form_path(params[:slug])) %>
        </div>
      </div>
    </draw-signature>
  </body>
</html>
