{% capture description %}
  A description of work done by Maxim Voldman Hutz for {{page.title}}.
{% endcapture %}

{% capture inner %}
  {% assign malung = site.data.work[page.project_id] %}
  {% assign techs = site.data.techs %}

  <link rel="preload stylesheet" href="/styles/experience.css">
  <link rel="preload stylesheet" href="/styles/tech.css">

  <section id="experience" class="dark back">
    <section id="banner" class="{{malung.color}} back">
      <div>
        <h1>{{malung.title}}</h1>
        <i>{{malung.subtitle}}</i>
      </div>
      <button id="close-icon" class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
    </section>
    <div id="content">
      <div id="description">
        <p>
          {{malung.description}}
        </p>
        <hr class="lighter">
        <ul>
          {% for outcome in malung.outcomes %}
            <li>{{outcome}}</li>
          {% endfor %}
        </ul>
        {% if malung.link %}
          <a href="{{malung.link}}" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right" target="_blank">View {{malung.title}}</a>
        {% endif %}
      </div>
      <div id="image-side">
        <div id="image" class="shadow">
          {% if malung.image %}
            <img id="image-inner" src="{{malung.image}}" alt="Image of {{malung.title}}">
          {% else %}
            <h1 aria-hidden="true">Image Not Available</h1>
          {% endif %}
        </div>
        <div id="stack">
          {% for tech in malung.stack %}
            {% assign data = techs[tech] %}
            <a class="chip {{tech}} shadow" href="{{data.link}}" target="_blank">{{data.name}}</a>
          {% endfor %}
        </div>
      </div>
    </div>
  </section>
{% endcapture %}

{% include default.html content=inner description=description title=page.title %}