<% @product = (@template if type.eql?('templates')) || (@extension if type.eql?('extensions')) %>
<article class="details-wrapper <%= type == 'templates' ? type : 'apps' %>">
  <!-- 基本資料 -->
  <div class="details-info">
    <div class="cover-container">
      <% if @product.thumbnail.present? %>
        <%= image_tag(type == "templates" ? @product.thumbnail.thumb_template.url : (type == "extensions" ? @product.thumbnail.thumb_extension.url : ""))%>
      <% else %>
        <%= placeholdit_image_tag (type == "templates" ? "480x300" : (type == "extensions" ? "300x300" : "")), background_color: "#3f3f3f" %>
      <% end %>
    </div>
    <div class="info-container">
      <h1 class="document-title"><%= @product.title %></h1>
      <div class="document-subtitle">
        <%= link_to(@product.author, "developer/?devid=2rqw9efjq923", :class => "developer") %>
        <%= content_tag(:p, (link_to("Education", "/" + type + "?category=Education")), :class => "category") %>
      </div>
      <p class="details-actions">
        <button type="button" class="btn btn-success buy"><% if @product.price.nil?%>Free<% else %><%= number_to_currency(@product.price) %><% end %></button>
        <button type="button" class="btn btn-default">
          <% if type == "templates" %>
            <span class="glyphicon glyphicon-eye-open"></span>
            Preview
          <% elsif type == "extensions" %>
            <span class="glyphicon glyphicon-plus-sign"></span>
            Add to Wish List
          <% end %>
        </button>
      </p>
      <hr>
      <div class="document-bottom">
        <div class="report-problem btn btn-default btn-xs">
          Report Problem
        </div>
        <%= render :partial => "shared/stars_rank" %>
      </div>
    </div>
  </div><!-- 基本資料 end -->
  <!-- 截圖 -->
  <%cache [ 'screenshots', expires_in: 30.minutes ] do%>
  <div class="details-section screenshots">
    <div class="screenshots-groups">
      <ul class="screenshots-list">
        <% if @product.previews.present? %>
         <% @product.previews.each do |p|%>
          <li class="screenshots-img">
            <%=image_tag p.image.url, width: "1024", height: "768" %>
           </li>
         <% end %>
        <% else%>
         <% 5.times do%>
          <li class="screenshots-img">
            <%= placeholdit_image_tag ("1024x768"), background_color: "#3f3f3f" %>
          </li>
         <% end %>
        <% end %>
      </ul>
    </div>
  </div><!-- 截圖 end -->
  <% end %>
  <!-- 說明 -->
  <div class="details-section description">
    <%= headingTitle("Description", nil) %>
    <div class="text-body">
      <p><%= @product.description %></p>
    </div>
    <div class="more-details">
      <a href="#">…more</a>
    </div>
  </div><!-- 說明 end -->
  <!-- 更新訊息 -->
  <div class="details-section whatsnew">
    <%= headingTitle("Whats New", nil) %>
    <div class="text-body">
      <dl>
        <% (1+rand(3)).times do |n| %>
          <dt class="version-number">3.4<%= n %></dt>
          <dd class="version-doc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
        <% end %>
      </dl>
    </div>
    <div class="more-details">
      <a href="#">…more</a>
    </div>
  </div><!-- 更新訊息 end -->
  <!-- 詳細資訊 -->
  <div class="details-section metadata">
    <%= headingTitle("Metadata", nil) %>
    <div class="row">
      <%= helper_metadata(type).html_safe %>
    </div>
  </div><!-- 詳細資訊 end -->
  <!-- 類似模組 -->
    <div class="details-section recommendation">
    <%= headingTitle("Recommendation", "#") %>
    <div class="item-list">
      <%= render :partial => "shared/item_card", :locals => {:type => type, :frequency => 6} %>
    </div>
  </div><!-- 類似模組 end -->
  <div class="details-section recommendation ">
    <%= headingTitle("Other items the same " + (type == "templates" ? "design" : (type == "extensions" ? "developer" : "")), "#") %>
    <div class="item-list">
      <%= render :partial => "shared/item_card", :locals => {:type => type, :frequency => 6} %>
    </div>
  </div><!-- 類似模組 end -->
</article>