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

  attr(:name, :string, required: true)
  attr(:start_date, :any, required: true)
  attr(:end_date, :any, default: nil)
  attr(:summary, :string, required: true)
  attr(:location, :string, required: true)
  attr(:highlights, :list, required: true)
  attr(:skills, :list, default: [])

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

      <h1><%= @position %></h1>

      <p class="summary" lang="en"><%= @summary %></p>

      <h2>Points clés</h2>
      <ul class="highlights">
        <%= for highlight <- @highlights do %>
          <li><%= highlight %></li>
        <% end %>
      </ul>

      <ul class="skills">
        <%= for skill <- @skills do %>
          <li><%= skill %></li>
        <% end %>
      </ul>
    </div>
    """
  end

  def css,
    do: """
    .work h1 {
      margin: 0;
    }

    .work > * {
      padding-left: 0.5em;
    }

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

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

      margin-bottom: 1em;
    }

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

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

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

    .work > h1 {
      font-weight: bold;
    }

    .work > h2 {
      font-size: 0.85em;
    }

    #work > ol > li {
      margin: 2em auto;
      padding-left: 0.5em;
    }

    #work ul.skills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.2em;
      margin-top: 1em;
    }

    #work .skills > li {
      padding: 3px 7px;
      font-size: 0.7em;
      font-weight: 700;
      color: #fff;
      text-align: center;
      background-color: #333;
      border-radius: 0.5em;
    }
    """
end