dirtycoder/pets

{% extends '_layouts/base.html' %}
{% load i18n static thumbnail %}

{% block page %}
  <div class="container">
    <div class="row">
      <div class="col-md-12">

        <div class="text-center hidden-print">
          <a onclick="window.print()" class="btn btn-primary">{% trans 'Print' %} <i class="fa fa-print"></i></a>
        </div>

        <div class="page">
          <div class="pull-left print-logo">
            <img class="img-responsive" src="{% static 'img/logo.png' %}" alt="Logo Cadê meu Bicho">
          </div>
          <div class="pull-right print-logo">
            <img class="img-responsive" src="{% static 'img/logo.png' %}" alt="Logo Cadê meu Bicho">
          </div>

          <h1 class="text-center text-uppercase poster-headline">
            {{ pet.status.description }}
          </h1>

          <div class="text-center">
            <img class="img-responsive img-rounded img-thumbnail"
                 src="{{ pet.profile_picture|thumbnail_url:'pet_poster' }}"
                 alt="{{ pet.name }}">
          </div>

          <h2 class="text-center poster-headline">
            {{ pet.name }}
          </h2>

          {% if pet.size and pet.sex %}
            <h2 class="text-center poster-subheadline">
              {% trans 'Size' %} {{ pet.get_size_display|lower }}, {{ pet.get_sex_display|lower }}
            </h2>
          {% endif %}

          <p class="font-1_8rem">{{ pet.description }}</p>

          <h3>{% trans 'Contact' %}</h3>

          <ul class="list-unstyled font-1_8rem">
            <li>
              {% trans 'Email' %} <i class="fa fa-envelope"></i>: {{ pet.owner.email }}
            </li>
            {% if pet.owner.phone %}
              <li>
                {% trans 'Phone' %} <i class="fa fa-phone"></i>: {{ pet.owner.phone }}
              </li>
            {% endif %}
          </ul>

          <div class="pull-right">
            <p class="font-1_8rem">{% trans 'Visit:' %} www.cademeubicho.com</p>
          </div>
        </div>

      </div>
    </div>
  </div>
{% endblock %}