{{ define "main" }}
<div class="detail-page">
    <div class="detail-header">
        <a href="javascript:history.back()" class="back-button">
            <span class="back-arrow">&#8592;</span> Back
        </a>
    </div>
    
    <div class="detail-content">
        <div class="detail-top">
            {{ if .Params.image }}
                <div class="detail-image-container">
                    <img src="{{ .Params.image }}" alt="{{ .Title }}" class="detail-image">
                </div>
            {{ else }}
                <div class="detail-image-placeholder" style="background-color:{{ if eq .Params.category "Books" }}#004d40{{ else if eq .Params.category "Movies" }}#01579b{{ else if eq .Params.category "TV Series" }}#4a148c{{ else if eq .Params.category "Recipes" }}#b71c1c{{ else if eq .Params.category "YouTube" }}#f44336{{ else }}#546e7a{{ end }}">
                    <div class="placeholder-initial">{{ substr .Title 0 1 }}</div>
                </div>
            {{ end }}
            
            <div class="detail-info">
                <h1>{{ .Title }}</h1>
                
                {{ with .Params.rating }}
                <div class="detail-rating">
                    {{ partial "stars.html" (dict "rating" .) }} {{ . }}
                </div>
                {{ end }}
                
                {{ with .Params.likes }}
                <div class="detail-likes">&#128077; {{ . }}</div>
                {{ end }}
                
                {{ with .Params.category }}
                <div class="detail-category">
                    <span class="category-badge">{{ . }}</span>
                </div>
                {{ end }}
                
                {{ with .Params.description }}
                <div class="detail-description">{{ . }}</div>
                {{ end }}
                
                {{ with .Params.link }}
                <div class="detail-link">
                    <a href="{{ .url }}" target="_blank" class="primary-link">{{ .label }} <span class="external-icon">&#8599;</span></a>
                </div>
                {{ end }}
                
                {{ if .Params.tags }}
                <div class="detail-tags">
                    Tags: 
                    {{ range .Params.tags }}
                        <span class="tag">{{ . }}</span>
                    {{ end }}
                </div>
                {{ end }}
            </div>
        </div>
        
        <div class="detail-body">
            {{ .Content }}
        </div>
    </div>
</div>

<style>
.detail-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.detail-header {
    margin: 20px 0;
}
.back-button {
    display: inline-flex;
    align-items: center;
    color: #1976d2;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.back-button:hover {
    background-color: rgba(25, 118, 210, 0.08);
}
.back-arrow {
    margin-right: 8px;
    font-size: 1.2em;
}
.detail-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}
.detail-top {
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .detail-top {
        flex-direction: row;
    }
}
.detail-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
.detail-image {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.detail-image-placeholder {
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 8px 8px 0 0;
}
@media (min-width: 768px) {
    .detail-image-container {
        padding: 40px;
    }
    .detail-image {
        max-height: 500px;
    }
    .detail-image-placeholder {
        width: 40%;
        height: 350px;
    }
}
.placeholder-initial {
    font-size: 5rem;
    font-weight: 300;
}
.detail-info {
    padding: 24px;
    flex: 1;
}
.detail-info h1 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 2rem;
    font-weight: 400;
}
.detail-rating {
    margin-bottom: 16px;
    font-size: 1.1rem;
}
.detail-likes {
    color: #e53935;
    margin-bottom: 16px;
}
.detail-category {
    margin-bottom: 16px;
}
.category-badge {
    background: #eceff1;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
    color: #37474f;
}
.detail-description {
    margin-bottom: 16px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #37474f;
}
.detail-link {
    margin: 20px 0;
}
.primary-link {
    display: inline-flex;
    align-items: center;
    background-color: #1976d2;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.primary-link:hover {
    background-color: #1565c0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.external-icon {
    margin-left: 8px;
    font-size: 0.9em;
}
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
}
.detail-body {
    padding: 24px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #37474f;
}
.detail-body p:first-child {
    margin-top: 0;
}
</style>
{{ end }}