eviltnan/freeturn

{% extends "base.html" %}
{% load wagtailimages_tags %}
{% load wagtailcore_tags %}
{% load wagtailfontawesome %}
{% load static %}
{% block body_class %}template-homepage{% endblock %}

{% block extra_css %}
{% image menu_items.portfolio.background fill-1920x1080 as background %}
<style>
    body {
        background: url('{{background.url}}') no-repeat center center fixed;
    }



</style>
{% fontawesome_css %}

{% endblock %}

{% block content %}

<div class="container">
    <a href="{% pageurl menu_items.portfolio %}" class="btn btn-outline-dark" id="back">back to portfolio</a>
    <h1 class="my-4">
        {{ page.title }}
    </h1>

    <div class="row">

        <div class="col-md-4">
            {% if page.logo %}
            {% image page.logo fill-400x400-c100 class="img-fluid portfolio-logo"%}
            {% else %}
            <img height="400" width="400" src="{% static 'img/default_project.png' %}" class="img-fluid portfolio-logo">
            {% endif %}
        </div>

        <div class="col-md-8">
            {% if page.duration %}
                <h2 class="my-3">{{ page.start_date | date:"M Y" }}, {{ page.duration }}
                    month{{page.duration|pluralize}}</h2>
            {% else %}
                <h2 class="my-3">Since {{ page.start_date | date:"M Y" }}</h2>
            {% endif %}
            <h3><i class="fa fa-address-book"></i> Position</h3>
            <p id="position">
                {{ page.position }}
            </p>

            <h3><i class="fa fa-check"></i> Responsibilities</h3>
            <p id="responsibilities">
                {% for responsibility in page.responsibilities.all %}
                {{responsibility}}<br>
                {% endfor %}
            </p>

            {% if page.project_url %}
            <h3><i class="fa fa-link"></i> Link</h3>
            <p><a href="{{ page.project_url }}" id="project-link">{{ page.project_url }}</a></p>
            {% endif %}
            <h3><i class="fa fa-cogs"></i> Technologies</h3>
            <div class="row">
                <div class="btn-group" role="group">
                    {% for technology in page.technologies.all %}

                    <a class="btn btn-light"
                       href="{% pageurl menu_items.portfolio %}?technology={{technology}}"
                       id="technology-{{technology|slugify}}">
                        {% if technology.logo %}
                        {% image technology.logo fill-32x32-c100 class="mx-auto d-block"%}
                        {% else %}
                        <img height="32" width="32" src="{% static 'img/default_technology.png' %}"
                             class="mx-auto d-block">
                        {% endif %}
                        {{ technology }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% if page.description != "<p></p>" %}
    <div class="row">
        <div class="col-md-12">
            <h2>Project description</h2>
            {{ page.description | richtext}}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}