---
layout: feature
---
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
{%- assign photoEffectsData = site.data.photoeffects -%}
<div class="container mt-4">
    <div class="col-md-11 mx-auto">
        <div class="row">
            <div class="col-md-3">
                <div class="categories-section">
                </div>
                <div class="categories-list">
                    <ul>
                        {%- for item in site.data.photo-categories -%}
                        {%- if page.category == item.category -%}
                        <li class="active-cat">
                            <a class="category-link " href="{{item.link}}">{{item.category}}</a>
                        </li>
                        {%- else -%}
                        <li>
                            <a class="category-link" href="{{item.link}}">{{item.category}}</a>
                        </li>
                        {%- endif -%}
                        {%- endfor -%}
                    </ul>

                </div>

            </div>
            <div class="col-md-9">
                <div class="row" id="upper-panel">
                    <div class="col-12 ">
                        <div>
                            <div>
                                <div>
                                    {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
                                    <h1 class="frame-h1">{%- for word in frameh1-%}
                                        {%- if forloop.first == true -%}
                                        {{word | capitalize }}
                                        {%- else -%}
                                        {{word}}
                                        {%- endif -%}
                                        {%- endfor -%}</h1>
                                </div>
                                {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
                                <h2 class="frame-h2">
                                    {%- for word in frameh2 -%}
                                    {%- if forloop.first == true -%}
                                    {{word | capitalize }}
                                    {%- else -%}
                                    {{word}}
                                    {%- endif -%}
                                    {%- endfor -%}
                                </h2>
                            </div>
                        </div>
                    </div>
                    {%- if page.typeOfPage == "category" -%}
                    {%- assign photoEffectsData = site.data.photo-categories -%}
                    {%- for item in photoEffectsData -%}
                    {%- if item.category == page.category -%}
                    {%- for i in item.features -%}
                    <div class="col-md-3 px-0">
                        <a class="photo-card" href="{{i.link}}">
                            <div>
                                <img src="{{i.image}}" alt="">
                                <div class="photo-effect-feature-name">
                                    {{i.name}}
                                </div>
                            </div>
                        </a>
                    </div>
                    {%- endfor -%}
                    {%- endif -%}
                    {%- endfor -%}
                    {%- else -%}
                    {%- assign photoEffectsData = site.data.photoeffects -%}
                    {%- for item in photoEffectsData -%}
                    <div class="col-md-3 px-0">
                        <a class="photo-card" href="{{item.url}}">
                            <div>
                                <img src="{{item.image}}" alt="">
                                <div class="photo-effect-feature-name">
                                    {{item.featureName}}
                                </div>
                            </div>
                        </a>

                    </div>
                    {%- endfor -%}
                    {%- endif -%}

                </div>
            </div>
        </div>
    </div>

</div>