{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign folder = page.folderName %}
{% assign accessData= site.data[folder][lang][file] %}
{% assign filesData= accessData.display_formats %}

<div>
    <div>
        <ol class="pl-3">
            {%- for i in filesData -%}
            {%- assign item = i | downcase -%}
            {%- assign fileData = site.data.files[lang][item] -%}
            {%- assign static = site.static_files -%}
            {%- if fileData.size>0 -%}

            <li class="file-li">
                <h1 class="feature-h1 text-left my-4">{{fileData.Format}}</h3>
                    {%- if fileData.fileImg -%}
                    <img src="{{fileData.fileImg }}" alt="img" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
                    {%- endif -%}
                    <ol class="file-info-item-list">
                        {%- if fileData.Pros -%}
                        <li>
                            <div>
                                <div class="info-title">Pros</div>
                                <div>{{fileData.Pros}}</div>
                            </div>
                        </li>
                        {%- endif -%}
                        {%- if fileData.Cons -%}
                        <li>
                            <div>
                                <div class="info-title">Cons</div>
                                <div>{{fileData.Cons}}</div>
                            </div>
                        </li>
                        {%- endif -%}
                        {%- if fileData.BasicInformation -%}
                        <li>
                            <div>
                                <div class="info-title">Basic Information</div>
                                <div>{{fileData.BasicInformation}}</div>
                            </div>
                        </li>

                        {%- endif -%}
                        {%- if fileData.DetailedInformation -%}
                        <li>
                            <div>
                                <div class="info-title">Detailed Information</div>
                                <div>{{fileData.DetailedInformation}}</div>
                            </div>
                        </li>

                        {%- endif -%}
                        {%- if fileData.Softwaresused -%}
                        <div>
                            <div>Platforms Supported</div>
                            <div class="d-flex  flex-wrap ">
                                {%- for item in fileData.Softwaresused -%}
                                <ul class="pl-0 pr-md-5">
                                    <li><b>{{item.platform}}</b> </li>
                                    <div
                                        class="pl-0 d-flex flex-wrap justify-content-between softwares-section flex-column ">
                                        {%- for data in item.softwares -%}
                                        <div class="d-flex mb-3">
                                            {%- if data.image -%}
                                            <img src={{data.image}} alt="software" loading='lazy' {%- if
                                                site.crossorigin -%} crossorigin {%- endif -%}>
                                            {%- endif -%}
                                            <div>
                                                <a class="d-block software-name" href="{{data.link}}">
                                                    <div>{{data.name}}</div>
                                                </a>
                                                <div class="software-value">{{data.type}}</div>
                                            </div>
                                        </div>
                                        {%- endfor -%}
                                    </div>
                                </ul>
                                {%- endfor -%}
                            </div>
                        </div>
                        {%- endif -%}
                    </ol>

            </li>

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

</div>