<div class="row">
  <div class="col-md-4">
    <div class="card card-primary card-outline">
      <div class="card-body box-profile text-center">
        <% if (profileUser.avatar) { %>
          <img class="profile-user-img img-fluid img-circle" src="<%= profileUser.avatar %>" alt="Avatar" style="width:120px;height:120px;object-fit:cover">
        <% } else { %>
          <i class="fas fa-user-circle" style="font-size:120px;color:#adb5bd"></i>
        <% } %>
        <h3 class="profile-username text-center mt-3"><%= profileUser.name %></h3>
        <p class="text-muted text-center text-capitalize"><%= profileUser.role.replace('_', ' ') %></p>

        <form id="avatarForm" class="mt-3">
          <div class="form-group">
            <label>Ganti Foto Profil</label>
            <input type="file" name="avatar" id="avatarInput" class="form-control-file" accept="image/jpeg,image/png,image/webp" required>
            <small class="form-text text-muted">JPG, PNG, atau WEBP. Maksimal 2 MB.</small>
          </div>
          <button type="submit" class="btn btn-primary btn-block" id="avatarSubmitBtn"><i class="fas fa-upload mr-1"></i> Upload Foto</button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Edit Nama</h3>
      </div>
      <form action="/profile" method="POST">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="card-body">
          <div class="form-group">
            <label>Nama</label>
            <input type="text" name="name" class="form-control" value="<%= profileUser.name %>" required>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" value="<%= profileUser.email %>" disabled>
            <small class="form-text text-muted">Email tidak dapat diubah sendiri, hubungi Super Admin.</small>
          </div>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-1"></i> Simpan Nama</button>
        </div>
      </form>
    </div>

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Ganti Password</h3>
      </div>
      <form action="/profile/password" method="POST">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="card-body">
          <div class="form-group">
            <label>Password Saat Ini</label>
            <div class="input-group">
              <input type="password" name="currentPassword" class="form-control" required>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary js-toggle-password" type="button" tabindex="-1" title="Tampilkan/sembunyikan password">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label>Password Baru</label>
            <div class="input-group">
              <input type="password" name="newPassword" class="form-control" minlength="8" required>
              <div class="input-group-append">
                <button class="btn btn-outline-secondary js-toggle-password" type="button" tabindex="-1" title="Tampilkan/sembunyikan password">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>
            <small class="form-text text-muted">Minimal 8 karakter. Sesi "Ingat saya" yang tersimpan akan dibatalkan setelah password diganti.</small>
          </div>
        </div>
        <div class="card-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-key mr-1"></i> Ganti Password</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="/js/profile.js?v=<%= assetVersion %>"></script>
