{% extends "base.html" %}

{% block title %}{{ post.title }} - {{ site_name }}{% endblock %}

{% block meta %}
{{ seo_meta | safe }}
{% endblock %}

{% block content %}
<article class="post">
    <header class="post-header">
        {% if post.category_name %}
        <div class="post-category">
            <a href="/category/{{ post.category_slug }}">{{ post.category_name }}</a>
        </div>
        {% endif %}

        <h1>{{ post.title }}</h1>

        <div class="post-meta">
            <time datetime="{{ post.created_at }}">{{ post.created_at[:10] }}</time>
            {% if post.author_name %}
            <span class="post-author">
                {% if post.author_avatar %}
                <img src="{{ post.author_avatar | upload_url }}" alt="{{ post.author_name }}" class="author-avatar">
                {% endif %}
                {{ post.author_name }}
            </span>
            {% endif %}
        </div>
    </header>

    {% if post.thumbnail %}
    <div class="post-thumbnail">
        <img src="{{ post.thumbnail | upload_url }}" alt="{{ post.title }}">
    </div>
    {% endif %}

    <div class="post-content">
        {{ post.body | render_blocks | safe }}
    </div>

    <footer class="post-footer">
        {% if post.categories %}
        <div class="post-categories">
            <span class="label">カテゴリ:</span>
            {% for cat in post.categories %}
            <a href="/category/{{ cat.slug }}">{{ cat.name }}</a>
            {% endfor %}
        </div>
        {% endif %}

        {% if post.tags %}
        <div class="post-tags">
            {% for tag in post.tags %}
            <a href="/tag/{{ tag }}" class="tag">#{{ tag }}</a>
            {% endfor %}
        </div>
        {% endif %}

        <div class="post-share">
            <span class="label">シェア:</span>
            <a href="https://twitter.com/intent/tweet?url={{ request.url }}&text={{ post.title }}" target="_blank" rel="noopener" class="share-twitter">Twitter</a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}" target="_blank" rel="noopener" class="share-facebook">Facebook</a>
            <a href="https://b.hatena.ne.jp/add?mode=confirm&url={{ request.url }}" target="_blank" rel="noopener" class="share-hatena">はてブ</a>
        </div>
    </footer>
</article>

{% if related_posts %}
<section class="related-posts">
    <h2>関連記事</h2>
    <div class="related-posts-grid">
        {% for rp in related_posts %}
        <article class="related-post-card">
            {% if rp.thumbnail %}
            <div class="related-post-thumbnail">
                <img src="{{ rp.thumbnail | upload_url }}" alt="{{ rp.title }}" loading="lazy">
            </div>
            {% endif %}
            <h3><a href="/post/{{ rp.slug }}">{{ rp.title }}</a></h3>
        </article>
        {% endfor %}
    </div>
</section>
{% endif %}

<style>
    .post-category {
        margin-bottom: 0.75rem;
    }

    .post-category a {
        color: var(--color-primary);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
    }

    .post-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: var(--color-text-muted);
        font-size: 0.9rem;
    }

    .post-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .author-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }

    .post-thumbnail {
        margin: 2rem 0;
        border-radius: 0.75rem;
        overflow: hidden;
    }

    .post-thumbnail img {
        width: 100%;
        height: auto;
    }

    .post-footer {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid var(--color-border);
    }

    .post-categories,
    .post-tags,
    .post-share {
        margin-bottom: 1rem;
    }

    .post-categories .label,
    .post-share .label {
        font-size: 0.875rem;
        color: var(--color-text-muted);
        margin-right: 0.5rem;
    }

    .post-categories a {
        color: var(--color-primary);
        text-decoration: none;
        margin-right: 0.5rem;
    }

    .post-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tag {
        font-size: 0.875rem;
        color: var(--color-text-muted);
        background: var(--color-surface);
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        text-decoration: none;
    }

    .tag:hover {
        color: var(--color-primary);
    }

    .post-share a {
        display: inline-block;
        padding: 0.375rem 0.75rem;
        border-radius: 0.25rem;
        font-size: 0.8rem;
        text-decoration: none;
        margin-right: 0.5rem;
    }

    .share-twitter {
        background: #1DA1F2;
        color: white;
    }

    .share-facebook {
        background: #4267B2;
        color: white;
    }

    .share-hatena {
        background: #00A4DE;
        color: white;
    }

    /* Related posts */
    .related-posts {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid var(--color-border);
    }

    .related-posts h2 {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .related-posts-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .related-post-card {
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .related-post-thumbnail {
        height: 120px;
        background: var(--color-surface);
    }

    .related-post-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .related-post-card h3 {
        padding: 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.4;
    }

    .related-post-card h3 a {
        color: var(--color-text);
        text-decoration: none;
    }

    .related-post-card h3 a:hover {
        color: var(--color-primary);
    }

    @media (max-width: 768px) {
        .related-posts-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}