{% extends "public/base.html" %}
{% block title %}{{ project.name }} — {{ site.name }}{% endblock %}
{% block description %}{{ project.summary }}{% endblock %}

{% block content %}
<div class="sec"><div class="wrap">
  <a class="back" href="{% url 'portfolio' %}">&larr; All work</a>
  <div class="hero-grid" style="align-items:start">
    <div>
      <div class="role">{{ project.category.name }}{% if project.completed_on %} · {{ project.completed_on|date:"Y" }}{% endif %}</div>
      <h1 style="font-size:clamp(30px,4.4vw,48px)">{{ project.name }}</h1>
      <p class="lead" style="margin-top:16px">{{ project.description|default:project.summary }}</p>
      <div class="hero-cta">
        {% if project.project_url %}<a href="{{ project.project_url }}" class="btn btn-primary" target="_blank" rel="noopener">Visit the site</a>{% endif %}
        <a href="{% url 'start_project' %}" class="btn">Build something like this</a>
      </div>
    </div>
    <div class="board">
      <div class="board-top"><i class="dot"></i><b>project details</b></div>
      <div class="row"><div class="host">Client</div><div></div><div class="meta">{{ project.client_name }}</div></div>
      <div class="row"><div class="host">Year</div><div></div><div class="meta">{{ project.completed_on|date:"Y" }}</div></div>
      <div class="row"><div class="host">Services</div><div></div><div class="meta">{{ project.services }}</div></div>
      <div class="row"><div class="host">Stack</div><div></div><div class="meta">{{ project.technologies }}</div></div>
    </div>
  </div>

  <div style="height:56px"></div>
  {% for img in project.images.all %}
    <div class="shot" style="border:1px solid var(--line);border-radius:6px;aspect-ratio:16/9;margin-bottom:18px">
      <img src="{{ img.image.url }}" alt="{{ img.caption|default:project.name }}"></div>
  {% empty %}
    <div class="shot" style="border:1px solid var(--line);border-radius:6px;aspect-ratio:16/9"><span>{{ project.name }}</span></div>
  {% endfor %}

  <div style="height:56px"></div>
  <div class="grid g2">
    <div><h2>The problem</h2><p class="muted">{{ project.problem }}</p></div>
    <div><h2>What it does</h2>
      {% for f in project.feature_list %}
      <div class="muted" style="font-size:15px;padding:7px 0 7px 18px;position:relative;border-bottom:1px solid var(--line-soft)">
        <span style="position:absolute;left:0;top:16px;width:9px;height:2px;background:var(--gold);display:block"></span>{{ f }}</div>
      {% endfor %}
    </div>
  </div>

  <div style="height:56px"></div>
  <div class="band"><h2>Need something similar?</h2>
    <p>Tell me what you're trying to build and I'll scope it properly.</p>
    <a href="{% url 'start_project' %}" class="btn btn-primary">Start a project</a></div>
</div></div>
{% endblock %}