{{!-- template-lint-disable no-invalid-interactive --}}
<div
  class={{cn "workflow-tracker-item" workflow-tracker-item--completed=this.isComplete}}
  data-test-workflow-tracker-item={{this.workflowId}}
  {{on 'mouseover' this.showDeleteButton}}
  {{on 'mouseleave' this.hideDeleteButton}}
  ...attributes
>
  <div class="workflow-tracker-item__description">
    <button
      type='button'
      {{on 'click' this.visit}}
      data-test-visit-workflow-button
    >
      <header class='workflow-tracker-item__heading'>
        {{this.workflowDisplayName}}
      </header>
      <div class='workflow-tracker-item__milestone'>
        {{#if this.isComplete}}
          Complete
        {{else}}
          {{this.currentMilestoneTitle}}
        {{/if}}
      </div>
    </button>
  </div>

  <div class="workflow-tracker-item__actions">
    {{#if this.deleteButtonShown}}
      <button
        class="workflow-tracker-item__icon workflow-tracker-item__delete-icon"
        type="button"
        {{on 'click' this.showDeleteConfirmation}}
        data-test-delete-workflow-button
      >
        {{svg-jar 'trash' width="16" title="Abandon workflow"}}
      </button>
    {{else}}
      <Boxel::ProgressIcon
        class='workflow-tracker-item__icon'
        @size="25"
        @isComplete={{this.isComplete}}
        @fractionComplete={{this.fractionComplete}}
      />
    {{/if}}
  </div>
</div>

{{#if this.deleteConfirmDialogShown}}
  <Boxel::Modal
    @isOpen={{true}}
    @onClose={{this.hideDeleteConfirmation}}
    @size="small"
    data-test-workflow-delete-confirmation-modal
  >
    <Boxel::CardContainer class="abandon-workflow-confirmation">
      <h2> {{svg-jar "failure-bordered"}} Abandon this workflow?</h2>
      <p>
        Please confirm if you wish to abandon this workflow. Any progress will be deleted
        and removed from the queue. This action cannot be undone.
      </p>
      <div class="abandon-workflow-confirmation__actions">
        <Boxel::Button {{on "click" this.hideDeleteConfirmation}}>Cancel</Boxel::Button>
        <Boxel::Button
          {{on "click" this.deleteWorkflow}}
          class="abandon-workflow-confirmation__abandon-button"
          @kind="danger"
          data-test-abandon-workflow-button
        >
          Abandon Workflow
        </Boxel::Button>
      </div>
    </Boxel::CardContainer>
  </Boxel::Modal>
{{/if}}