{% extends "base.html" %}

{% block title %}Profile: {{ profile.name }}{% endblock %}

{% block extra_head %}
<style>
.profile-card {
  max-width: 600px;
  margin: 20px auto;
  padding: 25px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  background-color: #fff;
  display: flex;
  align-items: flex-start; /* Align items top */
  gap: 20px; /* Space between avatar and text */
}

.profile-avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Make it round */
  object-fit: cover;
  border: 2px solid #eee;
}
.profile-avatar .placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 40px;
  border: 2px solid #eee;
}


.profile-details {
  flex-grow: 1;
}

.profile-details h1 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 1.8em;
}

.profile-title {
  font-size: 1.1em;
  color: #555;
  margin-bottom: 15px;
}

.profile-slug, .profile-email {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 5px;
}
.profile-slug code {
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
}

.profile-bio {
  margin-top: 20px;
  line-height: 1.6;
  font-size: 1em;
}

.profile-bio a {
  color: #007bff;
  text-decoration: none;
}
.profile-bio a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .profile-card {
    flex-direction: column; /* Stack avatar and details on small screens */
    align-items: center; /* Center items when stacked */
    text-align: center;
  }
  .profile-details {
      width: 100%;
  }
  .profile-avatar {
      margin-bottom: 15px;
  }
}

</style>
{% endblock %}

{% block content %}
<div class="profile-card">
  <div class="profile-avatar">
    {% if avatar_url %}
      <img src="{{ avatar_url }}" alt="{{ profile.name }}'s avatar">
    {% else %}
      <div class="placeholder">{{ profile.name[0]|upper }}</div>
    {% endif %}
  </div>
  <div class="profile-details">
    <h1>{{ profile.name }}</h1>
    {% if profile.title %}
      <p class="profile-title">{{ profile.title }}</p>
    {% endif %}
    {% if profile.profile_slug %}
        <p class="profile-slug">Profile URL: <code>/~{{ profile.profile_slug }}</code></p>
    {% endif %}
    {% if profile.email %}
      <p class="profile-email">Email: <a href="mailto:{{ profile.email }}">{{ profile.email }}</a></p>
    {% endif %}
    {% if profile_bio %}
      <div class="profile-bio">
        {{ profile_bio }}
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}
