{% load staticfiles %}

<!doctype html>
<html>
    <head>
	 	  <base target="_parent"/>
        <style>
        @font-face {
            font-family: josefinsans;
            src: url({% static "fonts/josefinsans.ttf" %});
        }

        *::-moz-selection {
            background: #B0B0B0;
        }

        *::selection {
            background: #B0B0B0;
        }

        .descTable{
            width: 100%;
            margin: 0 auto 1em;
            border-bottom: 2px solid;
            border-collapse: collapse;
            border-spacing: 0;
            font-size: 14px;
            line-height: 2;
            max-width: 100%;
            background-color: transparent;
            font-family: 'josefinsans', 'Arial';
            font-weight: 700;
            color: #5a5a5a;
        }

		  img{
		  	   max-width: 100%;
		  }
        </style>
        <meta charset="utf8" />
    </head>
	 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <body>
        {% for show in shows %}
        <table class="descTable">
            <thead>
                <tr>
                    <th colspan="2"><p style="text-align:center;font-size:22px;">{{ show.title }}</p></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><p style="text-align: left;">{{ show.location }}</p></td><td class="column-2"><p style="text-align: right;">{{ show.category }}</p></td>
                </tr>
                <tr>
                    <td><p style="text-align: left;">{{ show.date|date:"l j F Y - H\hi" }}</p></td><td class="column-2"><p style="text-align: right;">{{ show.slots }} place{{ show.slots|pluralize}} {% if show.slots_description != "" %}({{ show.slots_description }}){% endif %} - {{ show.price }} euro{{ show.price|pluralize}}</p></td>
                </tr>
					 {% if show.vips %}
				 	 <tr>
					 	  <td colspan="2"><p style="text-align: justify;">{{ show.vips }}</p></td>
					 </tr>
					 {% endif %}
					 <tr>
                    <td colspan="2">
                    <p style="text-align: justify;">{{ show.description }}</p>
                    {% for quote in show.quote_set.all %}
                    <p style="text-align:center; font-style: italic;">«{{ quote.text }}»{% if quote.author %} - {{ quote.author }}{% endif %}</p>
                    {% endfor %}
                    </td>
                </tr>
                {% if show.image %}
                <tr>
                    <td colspan="2"><p style="text-align:center;"><a href="{{ show.ext_link }}"><img class="imgDesc" style="display: inline;" src="{{ MEDIA_URL }}{{ show.image }}" alt="{{ show.title }}"></a></p></td>
                </tr>
                {% endif %}
            </tbody>
        </table>
        {% endfor %}
		  <script>
				// Correction de la taille des images
				
				/*$(document).ready(function() {
					$(".descTable").each(function() {
						$(this).width($("body").width());
					});
					
					$(".imgDesc").on("load", function() {
				
						// Dimensions
						origHeight = 500; // Hauteur souhaitée

						w = $(this).width();
						h = $(this).height();
						r = w/h; // Ratio de l'image
						maxWidth = $("body").width();

						if (r * origHeight > maxWidth)
						{
							$(this).width(maxWidth);
							$(this).height(maxWidth/r);
						}
						else
						{
							$(this).width(r * origHeight);
							$(this).height(origHeight);
						}
					});
				});*/


		  </script>
    </body>
</html>
