{{> header}}

<main class="item-detail">
  <div class="container">
    <!-- Breadcrumb -->
    <nav class="breadcrumb">
      <a href="/marketplace">Marketplace</a> / <a href="/marketplace/themes">Themes</a> / <span>{{theme.name}}</span>
    </nav>

    <div class="detail-grid">
      <!-- Main Content -->
      <div class="detail-main">
        <!-- Theme Preview -->
        <div class="preview-section">
          {{#if theme.thumbnailUrl}}
          <img src="{{theme.thumbnailUrl}}" alt="{{theme.name}}" class="main-preview">
          {{else}}
          <div class="preview-placeholder">🎨 No Preview Available</div>
          {{/if}}
          
          {{#if theme.screenshotUrls}}
          <div class="screenshots">
            {{#each theme.screenshotUrls}}
            <img src="{{this}}" alt="Screenshot" class="screenshot-thumb">
            {{/each}}
          </div>
          {{/if}}
        </div>

        <!-- Description -->
        <section class="content-section">
          <h2>Description</h2>
          <div class="description-content">
            {{#if theme.longDescription}}
            {{{theme.longDescription}}}
            {{else}}
            <p>{{theme.description}}</p>
            {{/if}}
          </div>
        </section>

        <!-- Features -->
        {{#if theme.features}}
        <section class="content-section">
          <h2>Features</h2>
          <ul class="features-list">
            {{#each theme.features}}
            <li>✅ {{this}}</li>
            {{/each}}
          </ul>
        </section>
        {{/if}}

        <!-- Changelog -->
        {{#if theme.changelog}}
        <section class="content-section">
          <h2>Changelog</h2>
          <div class="changelog">{{{theme.changelog}}}</div>
        </section>
        {{/if}}

        <!-- Reviews -->
        {{#if theme.ratings}}
        <section class="content-section">
          <h2>Reviews</h2>
          <div class="reviews-list">
            {{#each theme.ratings}}
            <div class="review">
              <div class="review-header">
                <span class="reviewer">{{this.user.name}}</span>
                <span class="review-rating">{{#times this.rating}}⭐{{/times}}</span>
                <span class="review-date">{{formatDate this.createdAt}}</span>
              </div>
              {{#if this.review}}<p class="review-text">{{this.review}}</p>{{/if}}
            </div>
            {{/each}}
          </div>
        </section>
        {{/if}}
      </div>

      <!-- Sidebar -->
      <aside class="detail-sidebar">
        <div class="sidebar-card">
          <h1>{{theme.name}}</h1>
          <p class="tagline">{{theme.description}}</p>
          
          <div class="rating-display">
            <span class="stars">⭐ {{theme.rating}}</span>
            <span class="count">({{theme.ratingCount}} reviews)</span>
          </div>

          {{#if theme.demoUrl}}
          <a href="{{theme.demoUrl}}" target="_blank" class="btn btn-secondary">🔗 Live Demo</a>
          {{/if}}
          
          <div class="meta-list">
            <div class="meta-item"><span>Version</span><strong>{{theme.version}}</strong></div>
            <div class="meta-item"><span>Downloads</span><strong>{{theme.downloads}}</strong></div>
            <div class="meta-item"><span>Category</span><strong>{{theme.category}}</strong></div>
            <div class="meta-item"><span>License</span><strong>{{theme.licenseType}}</strong></div>
            <div class="meta-item"><span>Last Updated</span><strong>{{formatDate theme.updatedAt}}</strong></div>
            {{#if theme.minVersion}}<div class="meta-item"><span>Min CMS Version</span><strong>{{theme.minVersion}}</strong></div>{{/if}}
          </div>

          <div class="author-info">
            <h3>Author</h3>
            <p class="author-name">{{theme.author}}</p>
            {{#if theme.authorUrl}}<a href="{{theme.authorUrl}}" target="_blank" class="author-link">Visit Website →</a>{{/if}}
          </div>

          {{#if theme.tags}}
          <div class="tags-section">
            <h3>Tags</h3>
            <div class="tags">
              {{#each theme.tags}}<span class="tag">{{this}}</span>{{/each}}
            </div>
          </div>
          {{/if}}

          {{#if theme.repositoryUrl}}
          <a href="{{theme.repositoryUrl}}" target="_blank" class="btn btn-outline">📂 View Source</a>
          {{/if}}
        </div>
      </aside>
    </div>
  </div>
</main>

<style>
.item-detail { padding: 2rem 0 4rem; }
.breadcrumb { margin-bottom: 1.5rem; font-size: 0.9rem; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.preview-section { margin-bottom: 2rem; }
.main-preview { width: 100%; border-radius: var(--border-radius); border: 1px solid var(--border); }
.preview-placeholder { height: 300px; background: var(--surface); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-muted); }
.screenshots { display: flex; gap: 0.75rem; margin-top: 1rem; overflow-x: auto; }
.screenshot-thumb { height: 80px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); transition: border-color 0.2s; }
.screenshot-thumb:hover { border-color: var(--primary); }
.content-section { margin-bottom: 2rem; padding: 1.5rem; background: var(--surface); border-radius: var(--border-radius); border: 1px solid var(--border); }
.content-section h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.description-content { line-height: 1.7; color: var(--text-muted); }
.features-list { list-style: none; padding: 0; margin: 0; }
.features-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.features-list li:last-child { border-bottom: none; }
.reviews-list { display: flex; flex-direction: column; gap: 1rem; }
.review { padding: 1rem; background: var(--background); border-radius: 8px; }
.review-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.reviewer { font-weight: 600; }
.review-date { color: var(--text-muted); font-size: 0.85rem; margin-left: auto; }
.review-text { margin: 0; color: var(--text-muted); }
.sidebar-card { background: var(--surface); border-radius: var(--border-radius); padding: 1.5rem; border: 1px solid var(--border); position: sticky; top: 2rem; }
.sidebar-card h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.tagline { color: var(--text-muted); margin: 0 0 1rem; }
.rating-display { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.stars { font-size: 1.1rem; }
.count { color: var(--text-muted); font-size: 0.9rem; }
.btn { display: block; width: 100%; padding: 0.75rem; text-align: center; border-radius: var(--border-radius); text-decoration: none; font-weight: 600; margin-bottom: 1rem; transition: all 0.2s; }
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn:hover { transform: translateY(-2px); }
.meta-list { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; }
.meta-item { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.9rem; }
.meta-item span { color: var(--text-muted); }
.author-info, .tags-section { border-top: 1px solid var(--border); padding-top: 1rem; margin-bottom: 1rem; }
.author-info h3, .tags-section h3 { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.author-name { margin: 0 0 0.25rem; font-weight: 600; }
.author-link { color: var(--primary); font-size: 0.9rem; text-decoration: none; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { padding: 0.25rem 0.75rem; background: var(--background); border-radius: 20px; font-size: 0.8rem; }
</style>

{{> footer}}

