{{template "base_header" .}}
{{$s := .UserSettings}}
<div class="page">
  {{if .ShowTopbar}}
    {{template "tabler_navbar" .}}
  {{end}}

  <div class="page-wrapper">
    {{if .PageHeader}}
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            {{if .PagePretitle}}
            <div class="page-pretitle">
              {{.PagePretitle}}
            </div>
            {{end}}
            <h1 class="page-title">
              {{.PageHeader}}
            </h1>
          </div>
        </div>
      </div>
    </div>
    {{end}}

    <div class="page-body">
      <div class="container-xl">
        <div class="card">
          <div class="row g-0">
            <div class="col-12 col-md-3 border-end">
              <div class="card-body">
                {{range $s.SidebarSections}}
                <h4 class="subheader">{{.Title}}</h4>
                <nav class="list-group list-group-transparent mb-4">
                  {{range .SubItems}}
                  <a href="{{.Link}}" class="list-group-item list-group-item-action d-flex align-items-center{{if .Active}} active{{end}}">{{.Title}}</a>
                  {{end}}
                </nav>
                {{end}}
              </div>
            </div>
            <div class="col-12 col-md-9 d-flex flex-column">
              <div class="card-body">
                <h3 class="card-title">{{defaultVal "My Account" $s.ActiveTab}}</h3>

                <div class="row mb-3">
                  <div class="col-auto">
                    <span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span>
                  </div>
                  <div class="col align-self-center">
                    <div class="text-secondary mt-1">Paweł Kuna</div>
                    <a href="#" class="btn btn-sm btn-outline-primary mt-2">Change avatar</a>
                  </div>
                </div>

                <h4 class="subheader">Personal Information</h4>
                <div class="row mb-3">
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label class="form-label">First Name</label>
                      <input type="text" class="form-control" value="Paweł">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label class="form-label">Last Name</label>
                      <input type="text" class="form-control" value="Kuna">
                    </div>
                  </div>
                </div>
                <div class="mb-3">
                  <label class="form-label">Email address</label>
                  <input type="email" class="form-control" value="pawel.kuna@example.com">
                </div>
                <div class="mb-3">
                  <label class="form-label">Bio</label>
                  <textarea class="form-control" rows="3" placeholder="Write a short bio...">UI Designer at Tabler</textarea>
                </div>

                <h4 class="subheader">Password</h4>
                <div class="row mb-3">
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label class="form-label">Current Password</label>
                      <input type="password" class="form-control" placeholder="Leave blank to keep unchanged">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="mb-3">
                      <label class="form-label">New Password</label>
                      <input type="password" class="form-control" placeholder="Leave blank to keep unchanged">
                    </div>
                  </div>
                </div>

                <div class="form-footer">
                  <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{template "tabler_footer" .}}
  </div>
</div>
{{template "base_footer" .}}