import Controls from './-components/controls';
import Status from './-components/status';
import Job from './-components/job';
import LiveJob from './-components/live-job';
---hbs---

<h2 class='flex justify-between items-center text-2xl mb-3'>
  <div class="flex items-center">
    {{@model.job.project}}
  </div>
  <Controls @repo={{@model.job}} @onToggleRecentBuilds={{fn (mut this.showRecentBuilds) (not this.showRecentBuilds)}} />
</h2>

<div class="relative">
  {{outlet}}

  <LiveJob as |jobs|>
    {{#if this.showRecentBuilds}}
      <section class="h-screen p-3 overflow-y-auto origin-top-right absolute right-0 top-0 w-64 bg-gray-200 rounded-lg shadow-lg">
        <h3 class='mb-4 bg-white text-gray-600 px-2 py-1 rounded-full'>Recent Builds</h3>
        <ul>
          {{#each jobs as |jobItem|}}
            <li class="mb-3">
              <LinkTo
                @route='organization.repository.job'
                @model={{jobItem._id}}
                @queryParams={{hash ember=true}}
                class='flex flex-col bg-white p-2 rounded-lg shadow {{if (is-active "organization.repository.job" jobItem._id) "border border-pink-400"}}'
              >
                <div class="flex items-center mb-2">
                  <Status @status={{jobItem.status}} class="mr-2"/>
                  {{jobItem.trigger.message}}
                </div>

                <div class="flex justify-between items-end">
                  <div class="flex flex-col">
                    <div class='flex items-center mt-2'>
                      <img src={{jobItem.trigger.author.image}} class="rounded-full w-6 mr-2" alt="Author avatar">
                      {{jobItem.trigger.author.name}}
                    </div>

                    <div class="mt-1 text-gray-800 text-sm">
                      {{format-date jobItem.created}}
                    </div>
                  </div>

                  <div class='flex flex-col text-gray-800 text-sm'>
                    {{jobItem.ref.branch}}
                    {{#if jobItem.ref.id}}
                      <div class='mt-1'>
                        {{truncate jobItem.ref.id}}
                      </div>
                    {{/if}}
                  </div>
                </div>
              </LinkTo>
            </li>
          {{/each}}
        </ul>
      </section>
    {{/if}}
  </LiveJob>
</div>