(() => {
  class Project {
    label; date; url;
    constructor(label, date, url) {
      this.label = label;
      this.date = date;
      this.url = url;
    }

    _build() {
      return `
          <p class="text-gray-900 text-sm ">${this.label}</p>
          <div class="border border-dashed flex-1 border-gray-500 h-0"></div>
          <div class="flex gap-1 items-baseline">
            <i class="text-xs text-gray-800">${this.date}</i>
            <a href="${this.url}">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
              </svg>
            </a>
          </div>
       `
    }
    show() {
      const container = document.createElement('div')
      container.classList = `flex flex-row items-baseline justify-between gap-2`
      container.innerHTML = this._build()
      return container
    }
  }

  const data = [
    { label: "Web Window Manager", date: new Date("9/18/2022"), url: "https://github.com/tristonarmstrong/web-window-manager" },
    { label: "Component Test Helper", date: new Date("6/18/2022"), url: "https://github.com/tristonarmstrong/component-test-helper" },
    { label: "Hive DAPP", date: new Date("3/8/2022"), url: "https://github.com/tristonarmstrong/hive-dapp" },
    { label: "Kivy Twisted Input Capture", date: new Date("6/27/2021"), url: "https://github.com/tristonarmstrong/KivyTwistedInputCapture" },
    { label: "Plant Monitor Node MCU", date: new Date("6/27/2021"), url: "https://github.com/tristonarmstrong/PlantMonitorNodeMCU" },
    { label: "Oppo BDP 103 CLI", date: new Date("4/10/2021"), url: "https://github.com/tristonarmstrong/oppo_bdp_103_CLI" },
    { label: "Sony Bravia Pro Server", date: new Date("4/10/2021"), url: "https://github.com/tristonarmstrong/sony_bravia_pro_display_mock_server" },
    { label: "Chat IO", date: new Date("6/10/2020"), url: "https://github.com/tristonarmstrong/chat.io" },
    { label: "Solar Battery Monitor API", date: new Date("7/18/2023"), url: "https://github.com/tristonarmstrong/SolarBatteryMonitorApi" },
    { label: "Zip Code Distance App", date: new Date("1/28/2020"), url: "https://github.com/tristonarmstrong/zipapp" },
    { label: "Armstrong Editor", date: new Date("12/14/2022"), url: "https://github.com/tristonarmstrong/armstrong-editor" },
  ]

  const container = document.getElementById('projects')
  data.sort((a, b) => b.date - a.date).forEach(
    p => container.appendChild(new Project(p.label, p.date.toDateString(), p.url).show())
  )
})()