{% extends 'public_frontend/base.html' %}
{% load i18n %}
{% load static %}
{% block title %}{{ service.title }}{% endblock %}

{% block content %}
<article class="grid gap-6">
  <header class="bg-white rounded-lg shadow-md p-6 flex items-start gap-4">
    <img src="{% static 'service_icons/' %}{{ service.image_name }}" alt="{{ service.title }} icon" class="w-16 h-16 object-contain"/>
    <div>
      <h1 class="text-3xl font-bold">{{ service.title }}</h1>
      {% if service.description %}
        <p class="text-gray-600 mt-1">{{ service.description }}</p>
      {% endif %}
    </div>
  </header>

  {% if service.body_html %}
    <section class="bg-white rounded-lg shadow-md p-6 prose max-w-none">
      {{ service.body_html|safe }}
    </section>
  {% elif service.body %}
    <section class="bg-white rounded-lg shadow-md p-6">
      <pre class="whitespace-pre-wrap text-gray-700">{{ service.body }}</pre>
    </section>
  {% endif %}

  <div>
    <a href="/" class="text-blue-700 hover:underline">← {% trans "Back to Home" %}</a>
  </div>
</article>
{% endblock %}
