{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign folder = page.folderName %}
{% assign accessData= site.data[folder][lang][file] %}
{% assign compareFiles= accessData.compare_formats %}
{%- for i in compareFiles -%}
{%- if forloop.index ==1 -%}
{%- assign item = i | downcase -%}
{%- assign firstFile = site.data.files[lang][item] -%}
{%- endif -%}
{%- if forloop.index ==2 -%}
{%- assign item = i | downcase -%}
{%- assign secondFile = site.data.files[lang][item] -%}
{%- endif -%}
{%- endfor -%}
{%- if firstFile and secondFile -%}
{%- if firstFile.Format or secondFile.Format -%}
<h1 class="feature-h1 text-left my-4">Details of {{firstFile.Format}} and {{secondFile.Format}} file format</h1>
{%- endif -%}
<table class="table table-bordered  ">
    <tbody>

        {%- if firstFile.Format or secondFile.Format -%}
        <tr>
            <th scope="row">Format</th>
            <td>{{firstFile.Format}}</td>
            <td>{{secondFile.Format}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.ShortName or secondFile.ShortName -%}
        <tr>
            <th scope="row">Short Name</th>
            <td>{{firstFile.ShortName}}</td>
            <td>{{secondFile.ShortName}}</td>
        </tr>
        {%- endif -%}

        {%- if firstFile.FullName or secondFile.FullName -%}
        <tr>
            <th scope="row">Full Name</th>
            <td>{{firstFile.FullName}}</td>
            <td>{{secondFile.FullName}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.Category or secondFile.Category -%}
        <tr>
            <th scope="row">Category</th>
            <td>{{firstFile.Category}}</td>
            <td>{{secondFile.Category}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.Pros or secondFile.Pros -%}
        <tr>
            <th scope="row">Pros</th>
            <td>{{firstFile.Pros}}</td>
            <td>{{secondFile.Pros}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.Cons or secondFile.Cons -%}
        <tr>
            <th scope="row">Cons</th>
            <td>{{firstFile.Cons}}</td>
            <td>{{secondFile.Cons}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.Createdby or secondFile.Createdby -%}
        <tr>
            <th scope="row">Created by</th>
            <td> <a class="software-name" href="{{firstFile.CreatedbyLink}}"> {{firstFile.Createdby}}</a></td>
            <td> <a class="software-name" href="{{secondFile.CreatedbyLink}}"> {{secondFile.Createdby}}</a></td>
        </tr>
        {%- endif -%}
        {%- if firstFile.CreatedInYear or secondFile.CreatedInYear -%}
        <tr>
            <th scope="row">Created in </th>
            <td>{{firstFile.CreatedInYear}}</td>
            <td>{{secondFile.CreatedInYear}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.BasicInformation or secondFile.BasicInformation -%}
        <tr>
            <th scope="row">Basic information</th>
            <td>{{firstFile.BasicInformation}}</td>
            <td>{{secondFile.BasicInformation}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.DetailedInformation or secondFile.DetailedInformation -%}
        <tr>
            <th scope="row">Detailed information</th>
            <td>{{firstFile.DetailedInformation}}</td>
            <td>{{secondFile.DetailedInformation}}</td>
        </tr>
        {%- endif -%}
        {%- if firstFile.Softwaresused or secondFile.Softwaresused -%}
        <tr>
            <th scope="row">Platform Supported</th>
            <td>
                {%- for item in firstFile.Softwaresused -%}
                <ul class="pl-0">
                    <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 -%}
            </td>
            <td>
                {%- for item in secondFile.Softwaresused -%}
                <ul>
                    <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 -%}
            </td>
        </tr>
        {%- endif -%}

    </tbody>
</table>
{%- else -%}

{%- endif -%}