{{define "content"}}
{{$data := .Content}}
{{if $data.Groups}}
<section class="row g-4">
  {{range $data.Groups}}
  <div class="col-12 col-xl-6 col-xxl-4">
    <article class="card border-0 shadow-sm h-100">
      <div class="card-body p-4">
        <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
          <div class="d-flex align-items-start gap-3 min-w-0">
          <div class="brand-mark">
            <i class="{{.Group.Icon}}"></i>
          </div>
          <div class="min-w-0">
            <h2 class="h4 mb-1 text-body-emphasis">{{.Group.Name}}</h2>
            {{if .Group.Description}}<div class="small text-body-secondary">{{.Group.Description}}</div>{{end}}
          </div>
          </div>
          {{if and $.User (ne $.User.Role "viewer")}}
          <button
            class="btn btn-outline-secondary btn-sm"
            type="button"
            data-bs-toggle="modal"
            data-bs-target="#editGroupModal"
            data-group-id="{{.Group.ID}}"
            data-group-name="{{.Group.Name}}"
            data-group-description="{{.Group.Description}}"
            data-group-icon="{{.Group.Icon}}"
          >
            <i class="ti ti-pencil"></i>
          </button>
          {{end}}
        </div>
        <div class="d-flex align-items-center justify-content-between">
          <span class="text-body-secondary small text-uppercase fw-semibold">VMs</span>
          <span class="fs-4 fw-bold text-body-emphasis">{{.VMCount}}</span>
        </div>
      </div>
    </article>
  </div>
  {{end}}
</section>
{{else}}
<section class="card border-0 shadow-sm">
  <div class="card-body py-5 text-center text-body-secondary">
    <i class="ti ti-stack-2 fs-1 d-block mb-3"></i>No groups yet.
  </div>
</section>
{{end}}
{{end}}
