<section class="flex flex-col gap-4">
   <div class="flex flex-col gap-1">
      {% include 'lib/alert.twig' %}
      <h3 class="text-2xl font-semibold">
         Profile
      </h3>
      {% include 'lib/rule.twig' %}
      <form action="/account/profile" method="post">
         {% include 'lib/forms/profile.twig' with {
            name: user.name,
            company_name: user.company_name,
            company_type: user.company_type,
            company_size: user.company_size,
            dark_theme: user_settings.dark_theme
         } %}
         {% include 'lib/buttons/primary.twig' with { 
            label: 'Save Profile', 
         } %}
      </form>
   </div>
   <div class="flex flex-col gap-1">
      <h3 class="text-2xl font-semibold">
         Email
      </h3>
      <form action="/account/email" method="post">
         {% include 'lib/inputs/text.twig' with { 
            type: 'text', 
            name: 'email', 
            value: user.email
         } %}
         <h4 class="font-semibold">
            Verified:
            {{ user.verified ? 'Yes' : 'No' }}
         </h4>
         {% include 'lib/buttons/primary.twig' with { 
            label: 'Save Email', 
         } %}
      </form>
   </div>
   <div class="flex flex-col gap-1">
      <div class="flex justify-between items-center">
         <h3 class="text-2xl font-semibold">
            Shipping
         </h3>
         <a href="/account/shipping">
            Edit
         </a>
      </div>
      {% include 'lib/rule.twig' %}
      {% for address in addresses %}
         {% if address.id == user.shipping_address_id %}
            {% include 'lib/address.twig' with {
               address: address,
            } %}
         {% endif %}
      {% endfor %}
   </div>
   <div class="flex flex-col gap-1">
      <div class="flex justify-between items-center">
         <h3 class="text-2xl font-semibold">
            Billing
         </h3>
         <a href="/account/billing">
            Edit
         </a>
      </div>
      {% include 'lib/rule.twig' %}
      {% for address in addresses %}
         {% if address.id == user.billing_address_id %}
            {% include 'lib/address.twig' with {
               address: address,
            } %}
         {% endif %}
      {% endfor %}
   </div>
   <div class="flex flex-col gap-1">
      <div class="flex justify-between items-center">
         <h3 class="text-2xl font-semibold">
            Credit Card
         </h3>
         <a href="/account/billing">
            Edit
         </a>
      </div>
      {% include 'lib/rule.twig' %}
   </div>
   <div class="flex flex-col gap-1">
      <div class="flex justify-between items-center">
         <div class="flex items-center gap-2">
            <h3 class="text-2xl font-semibold">
               Store Credit
            </h3>
            <a href='#store-credit'>
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info">
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 16v-4" />
                  <path d="M12 8h.01" />
               </svg>
            </a>
         </div>
         <span>
            {{ '$' ~ (balance.cents / 100) | number_format(2, '.', ',') }}
         </span>
      </div>
      {% include 'lib/rule.twig' %}
   </div>
   <div class="flex flex-col gap-1">
      <div class="flex justify-between items-center">
         <div class="flex items-center gap-2">
            <h3 class="text-2xl font-semibold">
               Sats
            </h3>
            <a href='#sats'>
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info">
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 16v-4" />
                  <path d="M12 8h.01" />
               </svg>
            </a>
         </div>
         <span>
            {{ balance.sats | number_format(0, '', ',') }}
         </span>
      </div>
      {% include 'lib/rule.twig' %}
   </div>
   <div class="flex flex-col gap-1">
      <h3 class="text-2xl font-semibold">
         Email Notifications
      </h3>
      {% include 'lib/rule.twig' %}
      <form action="/account/notifications" method="post">
         <div class="flex flex-col gap-4 mb-4">
            {% include 'lib/inputs/toggle.twig' with { 
            label: 'Recieve coupons & more', 
            name: 'opt_in_promotional',
            on: user_settings.opt_in_promotional
         } %}
            {% include 'lib/inputs/toggle.twig' with { 
            label: 'Recieve subscription reminders', 
            name: 'opt_in_subscription',
            on: user_settings.opt_in_subscription
         } %}
            {% include 'lib/inputs/toggle.twig' with { 
            label: 'Recieve order updates', 
            name: 'opt_in_order',
            on: user_settings.opt_in_order
         } %}
         </div>
         {% include 'lib/buttons/primary.twig' with { 
            label: 'Save',
         } %}
      </form>
   </div>
</section>
{% include 'lib/modal.twig' with {
   id: 'store-credit',
   content: 'lib/modals/credit.twig'
} %}
{% include 'lib/modal.twig' with {
   id: 'sats',
   content: 'lib/modals/sats.twig'
} %}
