---
layout: feature
---

{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="categories-section">
                <h3>Categories</h3>
            </div>
            <div class="categories-list">
                <div class="accordion" id="accordionExample">
                    {%- for item in site.data.photo-categories -%}
                    <div class="card">
                        <div class="card-header" id="heading-{{forloop.index}}">
                            <h3 class="mb-0">
                                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                                    data-target="#collapse-{{forloop.index}}" aria-expanded="true"
                                    aria-controls="collapse-{{forloop.index}}">
                                    {{item.category}}
                                </button>
                            </h3>
                        </div>

                        <div id="collapse-{{forloop.index}}" class="collapse show"
                            aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
                            <div class="card-body">
                                {%- for i in item.features -%}
                                <a href="{{i.link}}">{{i.name}}</a>
                                {%- endfor -%}
                            </div>
                        </div>
                    </div>
                    {%- endfor -%}
                </div>
            </div>

        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-8">
                    <form id="effect-form" data-feature-name="{{page.featureName}}">
                        {%- for item in fileData.elements -%}
                        {%- if item.type == "image" -%}
                        <label for="{{item.id}}">{{item.label}}</label>
                        <button type="button" id="{{item.id}}" data-index="{{forloop.index}}"
                            onclick="clickInput(this)">Choose
                            image</button>
                        <input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
                            data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
                        {%- endif -%}
                        {%- if item.type == "text" -%}
                        <label for="{{item.id}}">{{item.label}}</label>
                        <input type="text" id="{{item.id}}">
                        {%- endif -%}
                        {%- endfor -%}
                        <div>
                            <button type="submit">Go</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-4">
                    <div class="preview-section">
                        <img src="{{fileData.mainPreviewImage}}" alt="">
                    </div>
                    <h3>Examples</h3>
                    <div class="image-samples">
                        {%- for item in fileData.imageSamples -%}
                        <img src="{{item}}" alt="sample">
                        {%- endfor -%}
                    </div>
                </div>
            </div>

            <div class="crop-image-modal-container">
                <div class="row w-100">
                    <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
                        <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
                            <div>Select an area you would like to use</div>
                            <div>
                                <button onclick="closeModal()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="crop-image-modal-body">

                        </div>
                        <div class="crop-btn-section">
                            <button id="crop" class="mx-auto my-3"
                                style="background-color: {{fileData.color}};">crop</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="workspace" data-name="together_forever" style="display: none;">
                <div class="row">
                    <div class="col-md-8 mx-auto">
                        <div class="select-img-panel">
                            <div id="saving-data" style="display: none;">
                                <img loading="lazy" src="/img/save.gif" alt="saving"> <span class="ml-2">Saving your
                                    images...</span>
                            </div>
                            <div id="canvas-panel">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="options-panel">
                            <div class="title">

                            </div>
                            <div class="download-wrapper">
                                <button id="download-button" style="background-color: {{fileData.color}};"><svg
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path
                                            d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
                                    </svg>Download</button>
                            </div>
                        </div>

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

</div>