---
layout: contained
---
<div class="row mt-3">
  <div class="col-md-8">
    <!-- heading -->
    <div class="row mb-3">
      <div class="col">
        <h1>{{ page.title }}</h1>
      </div>
    </div>
    <!-- post -->
    <div class="row my-3">
      <div class="col">
        <div class="img-43 mb-3" style="background-image:url('{{ page.img_h }}')"></div>
        <div class="img-34" style="background-image:url('{{ page.img_v }}')"></div>
        <!-- <img src="{{ page.img_h }}" class="img-fluid mb-3">
        <img src="{{ page.img_v }}" class="img-fluid"> -->
      </div>
    </div>
    <div class="row my-3">
      <div class="col">
      {{ content }}
      </div>
    </div>
    <!-- similar posts -->
    <div class="row my-3">
      <div class="col">
        <p class="section-heading"><span class="sm">You may also enjoy</span></p>
        <div class="row md-gutters">
        {% assign maxRelated = 4 %}
        {% assign minCommonTags = site.similar_posts.tags_to_match %}
        {% assign maxRelatedCounter = 0 %}
        {% for post in site.posts %}
      
          {% assign sameTagCount = 0 %}
          {% assign commonTags = '' %}
      
          {% for tag in post.tags %}
            {% if post.url != page.url %}
              {% if page.tags contains tag %}
                {% assign sameTagCount = sameTagCount | plus: 1 %}
                {% capture tagmarkup %} <span class="label label-default">{{ tag }}</span> {% endcapture %}
                {% assign commonTags = commonTags | append: tagmarkup %}
              {% endif %}
            {% endif %}
          {% endfor %}
      
          {% if sameTagCount >= minCommonTags %}
          <div class="col-3">
            <a href="{{ post.url }}">
              {%- if post.img_t contains 'insta_sc|' -%}
                {%- capture t_url -%}https://instagram.com/p/{{ post.img_t | replace_first: "insta_sc|", "" }}/media/?size=l{%- endcapture -%}
              {%- else -%}
                {%- assign t_url = post.img_t -%}
              {%- endif -%}
              <div class="thumb-post" style="background-image:url('{{ t_url }}')"></div>
              <h5 class="mx-2 mt-1 text-center">{{ post.title }}</h5>
            </a>
          </div>
            {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
            {% if maxRelatedCounter >= maxRelated %}
              {% break %}
            {% endif %}
          {% endif %}
      
        {% endfor %}
        </div>
      </div>
    </div>
    <!-- next prev posts -->
    <div class="row">
      <div class="col-6">
        <a class="btn btn-link px-0 d-flex align-items-center" href="{{ page.previous.url }}"><div><i class="fas fa-chevron-left mr-2"></i></div><div class="text-truncate lh-15">Previous post<br>{{ page.previous.title }}</div></a>
      </div>
      <div class="col-6">
        <a class="btn btn-link px-0 d-flex align-items-center justify-content-end" href="{{ page.next.url }}"><div class="text-truncate lh-15">Next post<br>{{ page.next.title }}</div><div><i class="fas fa-chevron-right ml-2"></i></div></a>
      </div>
    </div>
  </div>
  <!-- side bar -->
  <div class="col-md-4">
    <div class="row">
      <div class="col">
        <!-- shop outfit start -->
        <p class="text-center section-heading"><span class="sm">My outfits</span></p>
        {% assign thumbs = site.posts | slice: 0, 6 %}
        <div class="row md-gutters">
          {% for post in thumbs %}
          <div class="col-6">
            {%- if post.img_t contains 'insta_sc|' -%}
              {%- capture t_url -%}https://instagram.com/p/{{ post.img_t | replace_first: "insta_sc|", "" }}/media/?size=l{%- endcapture -%}
            {%- else -%}
              {%- assign t_url = post.img_t -%}
            {%- endif -%}
            <div class="thumb-post mt-3" data-toggle="modal" data-target="#mdShop{{ forloop.index }}" style="background-image:url('{{ t_url }}')"></div>
          </div>
          {% endfor %}
        </div>
        <!-- shop outfit start end -->
      </div>
    </div>
  </div>
</div>

{%- include qv_modal.html data=thumbs modalId="mdShop" -%}