{{define "content"}}
<h1>Profile</h1>
{{if .Success}}<div class="success">{{.Success}}</div>{{end}}
{{if .Error}}<div class="error">{{.Error}}</div>{{end}}
{{if .PictureURL}}
<div style="text-align:center;margin-bottom:1rem;">
  <img src="{{.PictureURL}}" alt="Profile picture" style="width:80px;height:80px;border-radius:50%;object-fit:cover;">
</div>
{{end}}
<div class="field">
  <div class="label">Email</div>
  <div class="value">{{.Email}}</div>
</div>
<form method="POST" action="/profile">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" value="{{.Name}}">
  <label for="bio">Bio</label>
  <textarea id="bio" name="bio" rows="3">{{.Bio}}</textarea>
  <label for="location">Location</label>
  <input type="text" id="location" name="location" value="{{.Location}}">
  <label for="website">Website</label>
  <input type="url" id="website" name="website" value="{{.Website}}">
  <label for="picture_url">Picture URL</label>
  <input type="url" id="picture_url" name="picture_url" value="{{.PictureURL}}">
  <button type="submit">Save Profile</button>
</form>
<form method="POST" action="/logout">
  <button type="submit" class="logout-btn">Log Out</button>
</form>
{{end}}