<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./javascript.svg" type="image/x-icon" />
    <link rel="stylesheet" href="/style.css" />
    <title>Back Row Heroes</title>
  </head>

  <body>
    <header>
      <a href="/" style="text-decoration: none">
        <h1>BACK ROW HEROES</h1>
      </a>
    </header>

    <main>
      <div class="flex_container">
        <% for (let i = 0; i < users.length; i++) { %> <% let user = users[i] %>
        <% const colorArray = ["green", "blue", "red"] %>

        <div class="button_container">
          <button
            class="buttons <%= colorArray[i] ? colorArray[i] : 'others' %>"
            onclick="handleClick(this)"
          >
            <p><%= user.name %></p>
            <iconify-icon icon="gridicons:dropdown"></iconify-icon>
          </button>

          <div class="dropdown" style="position: absolute" hidden>
            <div class="dropdown_flex">
              <iconify-icon icon="akar-icons:github-fill"></iconify-icon>
              <a
                href="<%= user.link %>"
                target="_blank"
                rel="noopener noreferrer"
              >
                <p><%= user.name %></p>
              </a>
            </div>
            <div class="dropdown_flex">
              <iconify-icon icon="bi:globe"></iconify-icon>
              <a
                href="<%= user.link %>"
                target="_blank"
                rel="noopener noreferrer"
              >
                <p>Link</p>
              </a>
            </div>

            <div class="dropdown_flex">
              <iconify-icon icon="ant-design:edit-filled"> </iconify-icon>
              <form
                action="/update/<%= user._id %>"
                method="POST"
                style="padding-right: 1rem"
              >
                <div style="text-align: right">
                  <input required name="name" placeholder="Your name" />
                </div>

                <div style="text-align: right">
                  <textarea
                    required
                    name="link"
                    style="width: 244px"
                    placeholder="Add your link here"
                  ></textarea>

                  <button type="submit" class="submit_button">UPDATE</button>
                </div>
              </form>
            </div>

            <div class="dropdown_flex">
              <iconify-icon
                style="color: red"
                icon="ant-design:delete-outlined"
              ></iconify-icon>

              <form action="/delete/<%= user._id %>" method="POST">
                <input
                  type="submit"
                  value="Delete"
                  style="
                    font-size: 2rem;
                    mix-blend-mode: overlay;
                    color: #000;
                    margin: 0;
                    padding: 0;
                    border: none;
                    background-color: transparent;
                    box-shadow: none;
                    text-decoration: underline;
                    color: #911e1e;
                    cursor: pointer;
                  "
                />
              </form>
            </div>
          </div>
        </div>
        <% } %>
      </div>

      <div class="container form_container">
        <h2>BECOME ONE</h2>

        <form method="POST" action="/submit">
          <input required name="name" placeholder="Your name" />

          <div>
            <textarea
              required
              name="link"
              style="width: auto"
              placeholder="Add your link here"
            ></textarea>
          </div>

          <button type="submit" class="submit_button">SUBMIT</button>
        </form>
      </div>
    </main>

    <footer>
      <p style="margin: 0.5rem">
        <a
          href="https://github.com/FlameRender/legendary-octo-journey"
          target="_blank"
          rel="noopener noreferrer"
          >Source code</a
        >
      </p>
      <p>A product of <a href="/oscar">BackRowHeroes</a></p>
    </footer>

    <script
      type="module"
      src="https://code.iconify.design/iconify-icon/1.0.0/iconify-icon.min.js"
    ></script>
    <script>
      const extractPixel = (widthString) => Number(widthString.split("px")[0]);

      const showDropdown = (element) => {
        const buttonWidth = element.clientWidth;
        const buttonContainer = element.parentNode;

        const dropdown = buttonContainer.children[1];
        dropdown.hidden = !dropdown.hidden;
        dropdown.style.width = `${buttonWidth}px`;
      };

      const handleClick = (element) => {
        showDropdown(element);

        const buttonContainer = element.parentNode;
        const dropdown = buttonContainer.children[1];
        const dropdownIcon = element.children[1];

        const dropdownWidth = extractPixel(dropdown.style.width);
        const buttonContainerMarginBottom = extractPixel(
          window
            .getComputedStyle(buttonContainer)
            .getPropertyValue("margin-bottom")
        );

        const RATIO_FOR_SPACE = 1.6;
        const spaceForDropdown = dropdownWidth / RATIO_FOR_SPACE;

        // Add space and rotate dropdown icon when dropdown is shown
        if (dropdown.hidden) {
          dropdownIcon.style.transform = "rotate(360deg)";

          buttonContainer.style.marginBottom = `${
            buttonContainerMarginBottom - spaceForDropdown
          }px`;
        } else {
          dropdownIcon.style.transform = "rotate(180deg)";

          buttonContainer.style.marginBottom = `${
            buttonContainerMarginBottom + spaceForDropdown
          }px`;
        }
      };
    </script>
  </body>
</html>
