{#
 # @author    SWM
 # @copyright 2025 SWM
 # @license   https://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2.0 or later
 #}
<div class="my3dbinpack-help-content">
  <h4>{{ trans('m3d.help.api.heading') }}</h4>
  
  <section class="help-section">
    <h3>{{ trans('m3d.help.api.section.what') }}</h3>
    <p>{{ trans('m3d.help.api.section.what_desc') }}</p>
  </section>

  <section class="help-section">
    <h3>{{ trans('m3d.help.api.section.how_to_get') }}</h3>
    <ol class="help-steps">
      <li>{{ trans('m3d.help.api.step.1')|raw }}</li>
      <li>{{ trans('m3d.help.api.step.2') }}</li>
      <li>{{ trans('m3d.help.api.step.3')|raw }}</li>
      <li>{{ trans('m3d.help.api.step.4') }}</li>
    </ol>
  </section>

  <section class="help-section">
    <h3>{{ trans('m3d.help.api.section.fields') }}</h3>
    <ul class="help-field-list">
      <li>
        <strong>{{ trans('m3d.help.api.field.username') }}</strong>
        <p>{{ trans('m3d.help.api.field.username_desc') }}</p>
      </li>
      <li>
        <strong>{{ trans('m3d.help.api.field.api_key') }}</strong>
        <p>{{ trans('m3d.help.api.field.api_key_desc') }}</p>
      </li>
    </ul>
  </section>

  <div class="help-warning">
    <span class="dashicons dashicons-warning"></span>
    <div>
      {{ trans('m3d.help.api.warning') }}
    </div>
  </div>

  <div class="help-tip">
    <span class="dashicons dashicons-lightbulb"></span>
    <div>
      <strong>{{ trans('m3d.help.api.tip') }}</strong>
      {{ trans('m3d.help.api.tip_desc') }}
    </div>
  </div>
</div>