{{define "contextAction"}}
  {{if eq .CurrentPath "/dashboard"}}
    <div class="header-search">
      <i class="ti ti-search header-search-icon"></i>
      <input
        id="dashboard-search"
        class="form-control"
        type="search"
        placeholder="Search nodes"
        aria-label="Search nodes"
      >
    </div>
  {{end}}
  {{if and .User (ne .User.Role "viewer")}}
    {{if eq .CurrentPath "/automations"}}
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addJobModal">
      <i class="ti ti-plus me-1"></i>Add Job
    </button>
    {{else if eq .CurrentPath "/updates"}}
    <form method="post" action="/updates/scan">
      <button class="btn btn-primary" type="submit">
        <i class="ti ti-refresh me-1"></i>Scan All
      </button>
    </form>
    {{else if eq .CurrentPath "/uptime"}}
    <form method="post" action="/uptime/run">
      <button class="btn btn-primary" type="submit">
        <i class="ti ti-activity-heartbeat me-1"></i>Run Checks
      </button>
    </form>
    {{else if eq .CurrentPath "/groups"}}
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#createGroupModal">
      <i class="ti ti-plus me-1"></i>Create Group
    </button>
    {{else if eq .CurrentPath "/dashboard"}}
    <button class="btn btn-primary btn-icon" type="button" data-bs-toggle="modal" data-bs-target="#addVmModal" data-bs-toggle-tooltip="tooltip" data-bs-title="Add VM" aria-label="Add VM">
      <i class="ti ti-plus"></i>
    </button>
    {{else}}
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addVmModal">
      <i class="ti ti-plus me-1"></i>Add VM
    </button>
    {{end}}
  {{end}}
{{end}}

{{define "shell"}}
<div class="app-shell d-flex min-vh-100">
  <aside class="app-sidebar border-end">
    <div class="app-sidebar-inner p-3 d-flex flex-column h-100">
      <a href="/dashboard" class="d-flex align-items-center gap-3 text-decoration-none mb-4 sidebar-brand">
        <img src="/static/img/maintainarr_logo.png" alt="Maintainarr" class="sidebar-logo">
        <div class="min-w-0">
          <div class="sidebar-brand-title text-body-emphasis">Maintainarr</div>
        </div>
      </a>

      <div class="sidebar-section-label">Navigation</div>
      <nav class="nav flex-column gap-1 app-sidebar-nav">
        <a href="/dashboard" class="app-nav-link {{if eq .CurrentPath "/dashboard"}}is-active{{end}}"><i class="ti ti-layout-grid"></i><span>Dashboard</span></a>
        <a href="/groups" class="app-nav-link {{if eq .CurrentPath "/groups"}}is-active{{end}}"><i class="ti ti-stack-2"></i><span>Groups</span></a>
        <a href="/automations" class="app-nav-link {{if eq .CurrentPath "/automations"}}is-active{{end}}"><i class="ti ti-clock-cog"></i><span>Jobs</span></a>
        <a href="/updates" class="app-nav-link {{if eq .CurrentPath "/updates"}}is-active{{end}}"><i class="ti ti-package-import"></i><span>Updates</span></a>
        <a href="/uptime" class="app-nav-link {{if eq .CurrentPath "/uptime"}}is-active{{end}}"><i class="ti ti-activity-heartbeat"></i><span>Uptime</span></a>
        <a href="/settings" class="app-nav-link {{if eq .CurrentPath "/settings"}}is-active{{end}}"><i class="ti ti-history"></i><span>Logs</span></a>
      </nav>

      <div class="card mt-auto border-0 sidebar-status shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3 min-w-0">
              <img src="/static/img/maintainarr_logo.png" alt="" class="sidebar-logo">
              <div class="min-w-0">
                <a class="fw-semibold text-truncate text-decoration-none text-reset d-block" href="/settings/user">{{with .User}}{{.Name}}{{end}}</a>
                <div class="text-body-secondary small text-truncate"><i class="ti ti-shield-half-filled me-1"></i>{{with .User}}{{.Role}}{{end}}</div>
              </div>
            </div>
            <div class="d-flex align-items-center gap-2">
              <a class="btn btn-outline-secondary btn-sm" href="/settings/user" data-bs-toggle-tooltip="tooltip" data-bs-title="User Settings" aria-label="User Settings"><i class="ti ti-user-cog"></i></a>
              <a class="btn btn-outline-secondary btn-sm" href="/logout" data-bs-toggle-tooltip="tooltip" data-bs-title="Logout" aria-label="Logout"><i class="fa-solid fa-right-from-bracket"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>

  <div class="d-flex flex-column flex-grow-1 min-w-0">
    {{if not (contains .CurrentPath "/console")}}
    <header class="app-header border-bottom">
      <div class="container-fluid px-3 px-lg-4">
        <div class="d-flex align-items-center justify-content-between gap-3 py-3">
          <div>
            <div class="fw-semibold text-body-emphasis d-flex align-items-center gap-2">
              {{if eq .CurrentPath "/dashboard"}}<i class="ti ti-layout-grid"></i>{{end}}
              {{if eq .CurrentPath "/groups"}}<i class="ti ti-stack-2"></i>{{end}}
              {{if eq .CurrentPath "/automations"}}<i class="ti ti-clock-cog"></i>{{end}}
              {{if eq .CurrentPath "/updates"}}<i class="ti ti-package-import"></i>{{end}}
              {{if eq .CurrentPath "/uptime"}}<i class="ti ti-activity-heartbeat"></i>{{end}}
              {{if eq .CurrentPath "/settings"}}<i class="ti ti-history"></i>{{end}}
              {{if eq .CurrentPath "/settings/user"}}<i class="ti ti-user-cog"></i>{{end}}
              {{if contains .CurrentPath "/nodes/"}}<i class="ti ti-server-2"></i>{{end}}
              <span>{{.Title}}</span>
            </div>
          </div>
          <div class="d-flex align-items-center gap-2">
            {{template "contextAction" .}}
          </div>
        </div>
      </div>
    </header>
    {{end}}

    <main class="content flex-grow-1">
      <div class="container-fluid {{if contains .CurrentPath "/console"}}p-0{{else}}px-3 px-lg-4 py-4{{end}}">
        {{template "content" .}}
      </div>
    </main>

    {{if not (contains .CurrentPath "/console")}}
    <footer class="app-footer border-top">
      <div class="container-fluid px-3 px-lg-4 py-3 d-flex flex-column flex-md-row justify-content-between gap-2 small text-body-secondary">
        <span><i class="ti ti-building-community me-1"></i>{{with .Organization}}{{.Name}}{{end}}</span>
        <span><i class="ti ti-user-circle me-1"></i>{{with .User}}{{.Name}} · {{.Role}}{{end}}</span>
      </div>
    </footer>
    {{end}}
  </div>
</div>

{{if and .User (ne .User.Role "viewer")}}
<div class="modal fade" id="createGroupModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg">
      <form method="post" action="/groups">
        <div class="modal-header">
          <h2 class="modal-title fs-5"><i class="ti ti-stack-2 me-2"></i>Create Group</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Icon</label>
            <input type="hidden" name="icon" id="createGroupIconValue" value="ti ti-stack-2">
            <button
              class="group-icon-field"
              type="button"
              data-bs-toggle="modal"
              data-bs-target="#groupIconPickerModal"
              data-icon-input="createGroupIconValue"
              data-icon-preview="createGroupIconPreview"
              data-icon-value="ti ti-stack-2"
            >
              <span class="group-icon-field-preview" id="createGroupIconPreview"><i class="ti ti-stack-2"></i></span>
              <span class="group-icon-field-text">
                <span class="group-icon-field-title">Choose icon</span>
                <span class="group-icon-field-subtitle">Search 200+ icons</span>
              </span>
              <i class="ti ti-chevron-right group-icon-field-arrow"></i>
            </button>
          </div>
          <div>
            <label class="form-label">Description</label>
            <textarea class="form-control" name="description" rows="3"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class="ti ti-x me-1"></i>Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="ti ti-plus me-1"></i>Create Group</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="editGroupModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow-lg">
      <form method="post" action="" data-edit-group-form>
        <div class="modal-header">
          <h2 class="modal-title fs-5"><i class="ti ti-pencil me-2"></i>Edit Group</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" required data-edit-group-name>
          </div>
          <div class="mb-3">
            <label class="form-label">Icon</label>
            <input type="hidden" name="icon" id="editGroupIconValue" value="ti ti-stack-2">
            <button
              class="group-icon-field"
              type="button"
              data-bs-toggle="modal"
              data-bs-target="#groupIconPickerModal"
              data-icon-input="editGroupIconValue"
              data-icon-preview="editGroupIconPreview"
              data-icon-value="ti ti-stack-2"
              data-edit-group-icon-trigger
            >
              <span class="group-icon-field-preview" id="editGroupIconPreview"><i class="ti ti-stack-2"></i></span>
              <span class="group-icon-field-text">
                <span class="group-icon-field-title">Choose icon</span>
                <span class="group-icon-field-subtitle">Search 200+ icons</span>
              </span>
              <i class="ti ti-chevron-right group-icon-field-arrow"></i>
            </button>
          </div>
          <div>
            <label class="form-label">Description</label>
            <textarea class="form-control" name="description" rows="3" data-edit-group-description></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class="ti ti-x me-1"></i>Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-1"></i>Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="groupIconPickerModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content border-0 shadow-lg">
      <div class="modal-header">
        <div class="min-w-0">
          <h2 class="modal-title fs-5"><i class="ti ti-icons me-2"></i>Choose Group Icon</h2>
          <div class="small text-body-secondary">Search and pick from the icon library.</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <div class="group-icon-search mb-3">
          <i class="ti ti-search group-icon-search-icon"></i>
          <input type="search" class="form-control" placeholder="Search icons" data-group-icon-search>
        </div>
        <div class="group-icon-picker-grid" data-group-icon-grid>
          {{range groupIcons}}
          <button class="group-icon-option" type="button" data-icon-option="{{.}}" title="{{.}}" aria-label="{{.}}">
            <i class="{{.}}"></i>
            <span>{{.}}</span>
          </button>
          {{end}}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="addVmModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content border-0 shadow-lg">
      <form method="post" action="/nodes" enctype="multipart/form-data">
        <div class="modal-header">
          <h2 class="modal-title fs-5"><i class="ti ti-server-2 me-2"></i>Add VM</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-4 p-lg-5">
          <div class="add-vm-form">
            <section class="add-vm-panel">
              <div class="add-vm-panel-title"><i class="ti ti-server-2 me-2"></i>Node</div>
              <div class="row g-3">
                <div class="col-12 col-lg-6">
                  <label class="form-label">IP address</label>
                  <input type="text" class="form-control" name="ip_address" placeholder="10.0.20.24" required>
                </div>
                <div class="col-12 col-lg-6">
                  <label class="form-label">Name</label>
                  <input type="text" class="form-control" name="name" placeholder="Optional display name">
                </div>
                <div class="col-12 col-lg-6">
                  <label class="form-label">Group</label>
                  <select class="form-select" name="group_id">
                    <option value="">None</option>
                    {{range .AvailableGroups}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
                  </select>
                </div>
                <div class="col-12 col-lg-6">
                  <label class="form-label">Tag</label>
                  <input type="text" class="form-control" name="tag" list="vm-tag-options" placeholder="prod, edge, lab">
                  <datalist id="vm-tag-options">
                    {{range .AvailableTags}}<option value="{{.}}"></option>{{end}}
                  </datalist>
                </div>
              </div>
            </section>

            <section class="add-vm-panel">
              <div class="add-vm-panel-title"><i class="ti ti-key me-2"></i>Access</div>
              <div class="mb-3">
                <label class="form-label">Username</label>
                <input type="text" class="form-control" name="ssh_username" placeholder="root" required>
              </div>

              <div class="auth-toggle mb-3" data-auth-toggle>
                <input type="radio" class="btn-check" name="auth_mode" id="authModePassword" value="password" autocomplete="off" checked>
                <label class="auth-toggle-option" for="authModePassword">
                  <span class="auth-toggle-label"><i class="ti ti-lock me-2"></i>Password</span>
                </label>

                <input type="radio" class="btn-check" name="auth_mode" id="authModeKey" value="key" autocomplete="off">
                <label class="auth-toggle-option" for="authModeKey">
                  <span class="auth-toggle-label"><i class="ti ti-key me-2"></i>Key File</span>
                </label>
              </div>

              <div class="auth-mode-panel" data-auth-panel="password">
                <label class="form-label">Password</label>
                <input type="password" class="form-control" name="ssh_password" placeholder="Password" data-auth-input="password">
              </div>

              <div class="auth-mode-panel d-none" data-auth-panel="key">
                <label class="form-label">SSH key</label>
                <input type="file" class="form-control" name="ssh_key" data-auth-input="key">
              </div>
            </section>

            <section class="add-vm-panel add-vm-panel-wide">
              <div class="add-vm-panel-title"><i class="ti ti-adjustments me-2"></i>Options</div>
              <div class="row g-3 align-items-start">
                <div class="col-12 col-lg-8">
                  <label class="form-label">Notes</label>
                  <textarea class="form-control" name="notes" rows="4" placeholder="Optional notes"></textarea>
                </div>
                <div class="col-12 col-lg-4">
                  <label class="form-label d-block">Behavior</label>
                  <label class="option-check">
                    <input class="form-check-input" type="checkbox" value="on" id="autoUpdatesEnabled" name="auto_updates_enabled">
                    <span>Enable auto updates</span>
                  </label>
                </div>
              </div>
            </section>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i class="ti ti-x me-1"></i>Cancel</button>
          <button type="submit" class="btn btn-primary"><i class="ti ti-plus me-1"></i>Create VM</button>
        </div>
      </form>
    </div>
  </div>
</div>
{{end}}
{{end}}
