@page "/profile/view/{Id}"
@inject HttpClient http
@inject AppState state

<Loading OnLoad=@RetrieveProfile>
  <PageTitle Title=@($"Employment Profile for {Citizen.DisplayName}") />
  <h2><a href="@Citizen.ProfileUrl" target="_blank">@Citizen.DisplayName</a></h2>
  <h4>@Profile.Continent!.Name, @Profile.Region</h4>
  <p>@WorkTypes</p>

  <hr>

  <div>
    @(new MarkupString(Profile.Biography.ToHtml()))
  </div>
    

  @if (Profile.Skills.Length > 0)
  {
    <hr>
    <h4>Skills</h4>
    <ul>
      @foreach (var skill in Profile.Skills)
      {
        var notes = skill.Notes == null ? "" : $" ({skill.Notes})";
        <li>@skill.Description@notes</li>
      }
    </ul>
  }

  @if (Profile.Experience != null)
  {
    <hr>
    <h4>Experience / Employment History</h4>
    <div>
      @(new MarkupString(Profile.Experience.ToHtml()))
    </div>
  }

  @if (Id == state.User!.Id.ToString())
  {
    <hr>
    <p><a href="/citizen/profile"><span class="oi oi-pencil"></span> Edit Your Profile</a></p>
  }
</Loading>