{{ 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 | relURL }}" alt="{{ .Title }}" class="detail-image">
                </div>
            {{ else }}
                <div class="detail-image-container"> <!-- Using the same container as the main image -->
                    <img src="/img/no-cover-available-yet.png" alt="{{ .Title }} - No cover available" class="detail-image"> <!-- Reusing detail-image class -->
                </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 }}
                
                {{ if eq .Params.consumed false }}
                <div class="detail-consumed-status">
                    <span class="not-consumed-badge-detail">Not {{ if eq .Params.category "Books" }}Read{{ else if eq .Params.category "Movies" }}Watched{{ else if eq .Params.category "TV Series" }}Watched{{ else if eq .Params.category "Restaurants" }}Visited{{ else if eq .Params.category "Recipes" }}Made{{ else if eq .Params.category "Concerts" }}Attended{{ else }}Experienced{{ end }} Yet</span>
                </div>
                {{ end }}
                
                {{ with .Params.recommended_by }}
                <div class="detail-recommended">
                    <span class="recommended-label">Recommended by:</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;
        align-items: flex-start; /* Vertically align items to the top */
        gap: 24px; /* Add space between image/placeholder and info */
    }
}
.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,
    .detail-image-placeholder {
        flex: 0 0 320px; /* Fixed width for the image/placeholder column */
        border-radius: 8px; /* Rounded corners on all sides */
    }

    .detail-image-container {
        padding: 20px; /* Reduced padding */
        /* background: #f5f5f5; is already defined in base styles */
    }

    .detail-image {
        max-width: 100%; /* Ensure image scales within container */
        max-height: 450px; /* Adjusted max height */
        /* object-fit: contain; is already defined in base styles */
        /* border-radius: 4px; is already defined in base styles */
    }

    .detail-image-placeholder {
        /* width: 40%; Replaced by flex rule */
        height: 320px; /* Make it square with the flex-basis */
        /* Other properties like display, align-items, justify-content are in base styles */
    }
    
    /* .detail-info will take remaining space due to flex:1 in its base style */
}
.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;
}
.not-consumed-badge-detail {
    display: inline-block;
    background-color: #2196f3;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 8px 0 16px 0;
}
.detail-recommended {
    margin-bottom: 16px;
    font-size: 1.05rem;
    color: #555;
}
.recommended-label {
    font-weight: 500;
    color: #333;
}
.detail-consumed-status {
    margin-bottom: 8px;
}
.detail-body {
    padding: 24px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #37474f;
}
.detail-body p:first-child {
    margin-top: 0;
}
</style>
{{ end }}