defmodule CvGenView.Education do
  use Phoenix.Component
  alias CvGenView.Date

  attr(:institution, :string, required: true)
  attr(:location, :string, required: true)
  attr(:start_date, :string, required: true)
  attr(:end_date, :string, required: true)

  def education(assigns) do
    ~H"""
    <div class="education">
      <div class="heading">
        <h1><%= @institution %></h1>
        <span class="location"><%= @location %></span>
        <div class="period">
          <Date.date date={@start_date} /> - <Date.date date={@end_date} />
        </div>
      </div>
    </div>
    """
  end

  # TODO: Almost the same as in Work heading, but not quite.
  def css(),
    do: """
    .education h1 {
      margin: 0;
    }

    .education > .heading {
      display: grid;
      grid-template-areas:
      "header location"
      "period _";
      gap: 0.5em;

      background-color: #eee;
      padding: 0.5em;

      margin-bottom: 1em;
    }

    .education > .heading > h1 {
      font-weight: bold;
    }

    .education > .heading > .location {
      font-weight: bold;
      justify-self: end;
      text-align: end;
    }

    .education > .heading > .period {
      font-weight: lighter;
    }

    .education > h1 {
      font-weight: bold;
    }
    """
end