{% extends "base.html" %}
{% block title %}
    {% if request.path in otpages %}
        {{ otpages[request.path]["title"] }} | OnlineConvert.cc
    {% endif %}
{% endblock %}

{% block description %}
    {%- if request.path in otpages -%}
        {{ otpages[request.path]["description"] }}
    {%- endif -%}
{% endblock %}

{% block faviconpng %}/static/images/online-convert-favicon.png{% endblock %}
{% block faviconico %}/onlineconvert-favicon.ico{% endblock %}

{% block head %}
{{ super() }}
{% endblock %}

{% block content %}
{% set _ht_otpages = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ht_otpages == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ht_otpages == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
    {% elif _ht_otpages == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
    {% endif %}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
        <div class="flex flex-col md:flex-row items-center gap-8">
            <div class="flex-1 animate-slide-up">
                {% if request.path in otpages %}
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4">{{ otpages[request.path]["h1_title"] }}</h1>
                <p class="text-lg text-white/90 max-w-2xl leading-relaxed">{{ otpages[request.path]["p_after_h1_title"] }}</p>
                {% endif %}
            </div>
            <div class="w-full md:w-1/3 flex-shrink-0">
                <img src="/static/images/placeholder_hero.svg" class="w-full max-h-60 object-contain" alt="{% trans %}Hero{% endtrans %}">
            </div>
        </div>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {% for key, item in filetypes.items() %}
        {% if not item['category'] %}
        <div class="file-card-hover group">
            <div class="file-card h-full p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 flex items-center justify-center">
                        <i class="{{ item['icon-class'] }} text-xl text-primary dark:text-primary-light"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <h5 class="font-semibold text-gray-900 dark:text-white text-base">{{ _(item['title']) }}</h5>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ _(item['description']) }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-1.5 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                        </div>
                        <form method="get" action="{{ full_url('/') }}" class="mt-3">
                            <input type="hidden" name="type" value="{{ key }}">
                            <label for="ot-format-{{ key }}" class="sr-only">{{ _(item['title']) }} - {% trans %}Select target format{% endtrans %}</label>
                            <select name="format" id="ot-format-{{ key }}" class="w-full px-3 py-2.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all" required>
                                <option value="none">{% trans %}Select target format{% endtrans %}</option>
                                {% for filetype in item['ext'] %}
                                    {% if not item['_prefix'] %}
                                        <option value="{{ filetype }}">{% trans %}Convert to {{ filetype }}{% endtrans %}</option>
                                    {% else %}
                                        <option value="{{ filetype }}">{{ item["_prefix"] | replace("{}", filetype) | replace("-", " ") | splitpart(0, '_') }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}

        {% for key, item in filetypes.items() %}
        {% if item['category'] %}
        <div class="file-card-hover group">
            <div class="file-card h-full p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 cursor-pointer transition-theme">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/10 to-primary/10 dark:from-accent-light/10 dark:to-primary-light/10 flex items-center justify-center">
                        <i class="{{ item['icon-class'] }} text-xl text-accent dark:text-accent-light"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <div>
                                <h5 class="font-semibold text-gray-900 dark:text-white text-base">{{ _(item['title']) }}</h5>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">{{ _(item['description']) }}</p>
                            </div>
                            <i class="fa fa-chevron-right text-xs text-gray-400 dark:text-gray-600 mt-1.5 group-hover:text-primary dark:group-hover:text-primary-light transition-colors"></i>
                        </div>
                        <form method="get" class="mt-3">
                            <input type="hidden" name="type" value="{{ key }}">
                            <label for="ot-format-cat-{{ key }}" class="sr-only">{{ _(item['title']) }} - {% trans %}Select target format{% endtrans %}</label>
                            <select name="format" id="ot-format-cat-{{ key }}" class="w-full px-3 py-2.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary dark:focus:border-primary-light outline-none transition-all" required>
                                <option value="none">{% trans %}Select target format{% endtrans %}</option>
                                {% for filetype in item['ext'] %}
                                    {% if not item['_prefix'] %}
                                        <option value="{{ filetype }}">{% trans %}Convert to {{ filetype }}{% endtrans %}</option>
                                    {% else %}
                                        <option value="{{ filetype }}">{{ item["_prefix"] | replace("{}", filetype) | replace("-", " ") | splitpart(0, '_') }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>

    {% include "shared/quick-access-otpages.html" %}
</div>
{% endblock %}

{% block footer %}
    {{ super() }}
    <script>
        $(".file-card form").on("submit", function(e) {
            e.preventDefault();
            const type = $(this).find("[name='type']").val();
            const format = $(this).find("[name='format']").val();
            if (!type || !format) return;
            if(format == "none") {
                window.location.href = `{{ full_url('/converter/') }}${type}`;
            } else {
                window.location.href = `{{ full_url('/converter/') }}${type}/${format.toLowerCase()}`;
            }
        })

        $(".file-card").on("click", function(e) {
            if(e.target.name == "format") return;
            $(this).find("form").submit();
        });

        $("[name='format']").on("change", function(e) {
            const type = $(this).parents("form").find("[name='type']").val();
            const format = $(this).val();
            if(format == "none") {
                window.location.href = `{{ full_url('/converter/') }}${type}`;
            } else {
                window.location.href = `{{ full_url('/converter/') }}${type}/${format.toLowerCase()}`;
            }
        });
    </script>
{% endblock %}