{% extends 'base.html' %}
{% load i18n gravatar%}

{% block head_title %}{% trans "Settings" %}{% endblock %}

{% block content %}
<div class="container mx-auto">
  <h1 class="text-3xl font-semibold text-center mb-6">{% trans "Profile" %}</h1>
  <div class="card card-border bg-base-100 shadow-lg w-4/5 mx-auto">
    <div class="card-body">
      <div class="hovercard-preview">
        <iframe src="https://gravatar.com/{{ user.email|gravatar_hash }}.card" width="100%" height="344px" style="border:0; margin:0; padding:0;" onload="resizeIframe(this)"></iframe>
      </div>
      <p class="text-center">All profile information is managed through Gravatar.</p>
      <div class="text-center mt-4 flex flex-col gap-4 mx-auto">
        <a href="https://gravatar.com/profile/" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
          Edit Profile on Gravatar 
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
          </svg>
        </a>
        <a href="{% url 'settings' %}" class="btn btn-secondary">Back to Settings</a>
      </div>
      <div class="divider"></div>
      <h2 class="text-lg font-semibold pt-0">What is Gravatar?</h2>
      <p class="mb-4">Gravatar (Globally Recognized Avatar) is a free service that links your email address to a profile picture and, optionally, a profile. Many websites, including this one, use Gravatar to display your avatar and profile automatically.</p>
      
      <h2 class="text-lg font-semibold">How does it work?</h2>
      <p class="mb-4">If you've set up a Gravatar, your profile picture will appear here whenever you use your email on supported sites. When someone hovers over or clicks on your avatar, your Gravatar profile will also appear if you have one. If you don't have a Gravatar yet, you'll see a default image instead.</p>
      
      <h2 class="text-lg font-semibold">Is it safe? What about privacy?</h2>
      <p class="mb-4">Gravatar is completely optional, opt-in, and prioritizes your security and privacy. Your email is never shared and only a hashed version is sent to Gravatar, protecting your identity while ensuring that your email address is not exposed to bots or scrapers. Your personal data remains secure, and you maintain full control over your public profile.</p>
      
      <h2 class="text-lg font-semibold">Want to update or add a Gravatar?</h2>
      <p class="mb-4">Go to Gravatar.com to set up or change your avatar or profile. Your updates will appear here once saved!</p>
    </div>
  </div>
</div>
{% endblock %}