{{define "content"}}
{{$data := .Content}}
<section class="card border-0 shadow-sm">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-darkish align-middle mb-0 logs-table">
        <thead>
          <tr>
            <th>Target</th>
            <th>Time</th>
            <th>Status</th>
            <th>Duration</th>
            <th>Command</th>
          </tr>
        </thead>
        <tbody>
          {{if $data.Logs}}
            {{range $index, $log := $data.Logs}}
            <tr>
              <td class="text-nowrap fw-semibold">{{$log.Target}}</td>
              <td class="text-nowrap">{{$log.StartedAt.Format "2006-01-02 15:04:05"}}</td>
              <td>
                <span class="badge {{if eq $log.Status "completed"}}text-bg-success{{else}}text-bg-danger{{end}}">{{$log.Status}}</span>
              </td>
              <td class="text-nowrap text-body-secondary">{{if $log.Duration}}{{$log.Duration}}{{else}}-{{end}}</td>
              <td class="logs-command-cell">
                <button
                  type="button"
                  class="btn btn-link logs-command-button"
                  data-bs-toggle="modal"
                  data-bs-target="#commandLogModal"
                  data-log-target="{{$log.Target}}"
                  data-log-time="{{$log.StartedAt.Format "2006-01-02 15:04:05"}}"
                  data-log-status="{{$log.Status}}"
                  data-log-duration="{{$log.Duration}}"
                  data-log-command="{{$log.CommandText}}"
                  data-log-output="{{$log.Output}}"
                >
                  <code class="logs-command-preview">{{$log.CommandText}}</code>
                </button>
              </td>
            </tr>
            {{end}}
          {{else}}
            <tr>
              <td colspan="5" class="text-body-secondary text-center py-5">No command history yet.</td>
            </tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>
</section>

{{if gt $data.TotalPages 1}}
<section class="d-flex align-items-center justify-content-between gap-3 mt-3">
  <div class="small text-body-secondary">Page {{$data.Page}} of {{$data.TotalPages}}</div>
  <nav aria-label="Logs pagination">
    <ul class="pagination pagination-sm mb-0">
      <li class="page-item {{if not $data.HasPrev}}disabled{{end}}">
        <a class="page-link" href="{{$data.CurrentPath}}?page={{$data.PrevPage}}" {{if not $data.HasPrev}}tabindex="-1" aria-disabled="true"{{end}}>Previous</a>
      </li>
      <li class="page-item disabled"><span class="page-link">{{$data.Page}}</span></li>
      <li class="page-item {{if not $data.HasNext}}disabled{{end}}">
        <a class="page-link" href="{{$data.CurrentPath}}?page={{$data.NextPage}}" {{if not $data.HasNext}}tabindex="-1" aria-disabled="true"{{end}}>Next</a>
      </li>
    </ul>
  </nav>
</section>
{{end}}

<div class="modal fade" id="commandLogModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header">
        <div class="min-w-0">
          <h2 class="modal-title fs-5 mb-1">Command Log</h2>
          <div class="small text-body-secondary" data-command-log-meta></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="logs-modal-section">
          <div class="logs-modal-label">Command</div>
          <pre class="logs-modal-pre" data-command-log-command></pre>
        </div>
        <div class="logs-modal-section">
          <div class="logs-modal-label">Output</div>
          <pre class="logs-modal-pre" data-command-log-output></pre>
        </div>
      </div>
    </div>
  </div>
</div>
{{end}}
