<div class="hero min-h-screen bg-base-200">
  <div class="hero-content text-center">
    <div>
      <h1 class="text-5xl font-bold"><%= pageTitle %></h1>
      <p class="py-6"><%= toolDescription %></p>
      <div
        class="flex flex-col min-h-fit lg:flex-row"
        style="align-items: center; justify-content: center"
      >
        <!-- Inputs -->
        <div class="card bg-primary-content  p-3 m-3 lg:p-6 lg:m-6">
          <% input_number = 1; %>
          <% inputs.forEach(cur => { %>
          <div id="<%= "input" + input_number %>" class="p-1"><%- include("partials/" + cur[0], {description: cur[1] || ""}); %></div>
          <% input_number++; %>
          <% }) %>
        </div>

        <!-- Direction arrows -->
        <div>
          <div class="hidden lg:flex flex-col">
            <svg
              class="fill-primary"
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 512 512"
            >
              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
              <path
                d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"
              />
            </svg>
          </div>
          <div class="flex flex-row lg:hidden">
            <svg
              class="fill-primary"
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 384 512"
            >
              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
              <path
                d="M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7L86.6 329.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128z"
              />
            </svg>
          </div>
        </div>

        <!-- Submit Button -->
        <button class="btn btn-primary m-6"><%= submitButtonText %></button>

        <!-- Direction arrows -->
        <div>
          <div class="hidden lg:flex flex-col">
            <svg
              class="fill-primary"
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 512 512"
            >
              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
              <path
                d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"
              />
            </svg>
          </div>
          <div class="flex flex-row lg:hidden">
            <svg
              class="fill-primary"
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 384 512"
            >
              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
              <path
                d="M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7L86.6 329.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128z"
              />
            </svg>
          </div>
        </div>

        <!-- Outputs -->
        <div class="card p-3 m-3 lg:p-6 lg:m-6">
          <% output_number = 1; %>
          <% outputs.forEach(cur => { %>
          <div id="<%= "output"+ output_number %>"class="p-1"><%- include("partials/" + cur[0], {description: cur[1] || "Output:"}); %></div>
          <% output_number++; %>
          <% }) %>
        </div>
      </div>
    </div>
  </div>
</div>
