{% extends 'base.html' %}
{% load core_tags %}
{% block title %}The Madeira | Merchandise{% endblock %}
{% block navblock %}{% navbar 'buy' %}{% endblock %}
{% block content %}
<h1>Madeira Merchandise</h1>
<h2>Releases</h2>
{% for album in albums %}
   <h3>{{ album.title }}</h3>
   <div class="media">
   <p>
   <img class="media-object img-thumbnail pull-right" src="{{ album.photo.image.url }}"
         alt="{{ album.title }}" title="{{ album.title }}" />
   </p>
   {% if album.labels %}
      <ul>
      {% for release in album.labels.all %}
         <li><a href="{{ release.record_label.url }}">{{ release.record_label.name }}</a> 
            {{ release.catalog_number }}, {{ release.release_date|date:"F d, Y" }}</li>
      {% endfor %}
      </ul>
   {% endif %}
   {{ album.desc|safe|linebreaks }}
   <p>Track listing:</p>
   <ol>
   {% for track in album.tracks.all %}
      <li>{{ track.track_name }}</li>
   {% endfor %}
   </ol>
   {% if album.merchants %}
      <p>Buy {{ album.title }} at:</p>
      <ul>
      {% for merchant in album.merchants.all %}
         <li><a href="{{ merchant.url }}">{{ merchant.name }}</a></li>
      {% endfor %}
      </ul>
   {% endif %}
   <br class="clearfix">
   </div>
{% endfor %}
{% if merchandise %}
<h2>Swag</h2>
<p>Support your favorite band!</p> 
{% endif %}
{% for item in merchandise %}
   <h3>{{ item.name }}</h3>
   <div class="media">
   <p>
      <img class="media-object pull-right img-rounded" src="{{ item.photo.image.url }}"
         alt="{{ item.name }}" title="{{ item.name }}" />
   </p>
   {{ item.desc|safe|linebreaks }}
   {% if item.in_stock %}
      <p>Price: ${{ item.price }}</p>
   {% else %}
      <p><strike>Price: ${{ item.price }}</strike> <strong>SOLD OUT!</strong></p>
   {% endif %}
   </div>
   {% if item.name == 'Ancient Winds T-Shirt' %}
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
      <input type="hidden" name="cmd" value="_s-xclick">
      <input type="hidden" name="hosted_button_id" value="BX9N8S4X5WPZG">
      <div class="row">
         <div class="col-md-2">
            Sizes:
            <input type="hidden" name="on0" value="Sizes">
            <select name="os0">
                <option value="Small">Small</option>
            </select>
         </div>
      </div>
      <div class="row" style="margin-top: 1.5rem">
         <div class="col-md-4">
            <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif"
            border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
         </div>
      </div>
      </form>
   {% endif %}
   <br class="clearfix">
{% endfor %}
{% endblock %}