{#
 # @author    SWM
 # @copyright 2025 SWM
 # @license   https://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2.0 or later
 #}
{% extends "admin/layout.html.twig" %}

{% block content %}

    <div class="card my3dbinpack-module-description">
        <div class="card-header">
            <h3>
                {{ trans('m3d.api.page.title_main') }}
                {{ help_trigger('api')|raw }}
            </h3>
        </div>
        <div class="card-body">
            <h5>{{ trans('m3d.api.section.how_works') }}</h5>
            <p>{{ trans('m3d.api.desc.how_works') }}</p>
            <ul>
                <li>{{ trans('m3d.api.result.packages_count') }}</li>
                <li>{{ trans('m3d.api.result.products_in_packages') }}</li>
                <li>{{ trans('m3d.api.result.fill_rate') }}</li>
                <li>{{ trans('m3d.api.result.visualization') }}</li>
            </ul>
            
            <h5>{{ trans('m3d.api.section.required_data') }}</h5>
            <ol>
                <li><strong>{{ trans('m3d.api.required.api_credentials') }}</strong> - {{ trans('m3d.api.required.api_credentials_desc') }}</li>
                <li><strong>{{ trans('m3d.api.required.carriers') }}</strong> - {{ trans('m3d.api.required.carriers_desc') }} <a href="?page=tdbinpack-settings&tab=carriers">{{ trans('m3d.tab.carriers_packages') }}</a></li>
                <li><strong>{{ trans('m3d.api.required.packages') }}</strong> - {{ trans('m3d.api.required.packages_desc') }}</li>
                <li><strong>{{ trans('m3d.api.required.product_dimensions') }}</strong> - {{ trans('m3d.api.required.product_dimensions_desc') }} <a href="{{ productsCatalogUrl }}">{{ trans('m3d.api.required.product_dimensions') }}</a></li>
            </ol>
            
            <p><strong>{{ trans('m3d.label.important') }}:</strong> {{ trans('m3d.api.warning.pricing')|raw }}</p>
        </div>
    </div>

    <div class="card my3dbinpack-api-page">
        <div class="card-header">
            <h3>{{ trans('m3d.api.page.title_settings') }}</h3>
        </div>
        <div class="card-body">
            {% if message %}
                <div class="notice notice-{{ messageType }} is-dismissible notice-with-margin">
                    <p>{{ message }}</p>
                </div>
            {% endif %}

            <div id="tdbinpack-api-verification-result">
                <div class="notice inline" style="height: 60px; visibility: hidden;"></div>
            </div>

            <form method="post" autocomplete="off" id="tdbinpack-api-form">
                <input type="hidden" name="tdbinpack_api_nonce" value="{{ nonce }}">
                <input type="hidden" name="tab" value="api">
                
                <div class="my3dbinpack-api-layout">
                    <div class="my3dbinpack-api-column-left">
                        <div class="my3dbinpack-api-form-group my3dbinpack-api-form-group-spaced">
                            <label class="my3dbinpack-api-label">{{ trans('m3d.api.username') }}</label>
                            <input class="my3dbinpack-api-input" 
                                   type="text" 
                                   id="api_username"
                                   name="api_username" 
                                   value="{{ apiUsername }}" 
                                   required>
                        </div>
                        
                        <div class="my3dbinpack-api-form-group my3dbinpack-api-form-group-spaced">
                            <label class="my3dbinpack-api-label">{{ trans('m3d.api.api_key') }}</label>
                            <input class="my3dbinpack-api-input" 
                                   type="text" 
                                   id="api_key"
                                   name="api_key" 
                                   value="{{ apiKey }}" 
                                   required>
                        </div>

                        <div class="my3dbinpack-api-actions">
                            <button type="submit" class="btn btn-primary button button-primary">
                                {{ trans('m3d.action.save') }}
                            </button>
                        </div>
                        
                        <div id="tdbinpack-verification-container" style="margin-top: 20px;"></div>
                    </div>

                    <div class="my3dbinpack-api-column-right">
                        <p>{{ trans('m3d.api.help.get_credentials') }}</p>
                        <ol>
                            <li>{{ trans('m3d.api.help.step1')|raw }}</li>
                            <li>{{ trans('m3d.api.help.step2') }}</li>
                            <li>{{ trans('m3d.api.help.step3')|raw }}</li>
                            <li>{{ trans('m3d.api.help.step4') }}</li>
                            <li>{{ trans('m3d.api.help.step5') }}</li>
                        </ol>
                        
                        <p><strong>{{ trans('m3d.label.note') }}:</strong> {{ trans('m3d.api.help.note') }}</p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    {{ help_dialog('api')|raw }}
    <link rel="stylesheet" href="{{ pluginUrl }}assets/css/admin-common.css">
    <link rel="stylesheet" href="{{ pluginUrl }}assets/css/admin-api.css">
{% endblock %}