use yew::prelude::*;

pub struct Projects;
impl Component for Projects {
  type Message = ();
  type Properties = ();

  fn create(_ctx: &Context<Self>) -> Self {
    Self
  }

  fn view(&self, _ctx: &Context<Self>) -> Html {
    html! {
      <>
      <div class="tile is-parent container mb-5 mt-5" style="height: auto !important;">
        { self.view_projects_ongoing() }
        { self.view_projects_finished() }
      </div>
      </>
    }
  }
}
impl Projects {
  fn view_projects_ongoing(&self) -> Html {
    html! {
      <>
        <p class="title ml-2 is-size-4">{r#"ongoing projects"#}</p>
        <div class="columns is-size-7 ml-3 mr-3" style="margin-top: var(--bulma-block-spacing) !important;">
          <div class="column box mb-5 mr-1">
            <p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/app_catnip">
              {r#"catnip"#}
            </a></p>
            <p class="content">{r#"all-rounder ide in the making"#}</p>
          </div>
          <div class="column box mb-5 ml-1">
            <p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/app_nekochat">
              {r#"neko chat"#}
            </a></p>
            <p class="content">{r#"my planned matrix client"#}</p>
          </div>
        </div>
      </>
    }
  }

  fn view_projects_finished(&self) -> Html {
    html! {
      <>
        <p class="title ml-2 is-size-4">{r#"finished projects"#}</p>
        <div class="columns is-size-7 ml-3 mr-3">
          <div class="column box mb-5 mr-1">
            <p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/lib_tinyevents">
              {r#"tiny events"#}
            </a></p>
            <p class="content">{r#"a java seventeen (and up) event-sys that is able to be scaled in large systems."#}</p>
          </div>
          <div class="column box mb-5 ml-1 mr-2">
            <p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/dotfiles">
              {r#"dotfiles"#}
            </a></p>
            <p class="content">{r#"my personal set of configurations for different things"#}</p>
          </div>
          <div class="column box mb-5 mr-1">
            <p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/i0uring/lib_swingify">
              {r#"swingify"#}
            </a></p>
            <p class="content">{r#"my java swing wrapper to simplify window creation for bogus-brains."#}</p>
          </div>
          <div class="column box mb-5 ml-1">
            <p class="subtitle is-inline-block mb-0"><a href="https://git.celesteflare.cc/stellaris/mod_mnet">
              {r#"modern netty"#}
            </a></p>
            <p class="content">{r#"fabric mod that adds experimental iouring and kqueue support."#}</p>
          </div>
        </div>
      </>
    }
  }
}
