{% from "_includes/forms" import select, field %}

{% set planList = [] %}
<div id="planList">
  {% if plan is not null and plan.id %}
    {% set planList = planList|merge([{'label': plan.name, 'value': plan.reference}]) %}
  {% endif %}

  {% set planInput %}
    <div class="flex">
      {{ select({
        name: 'reference',
        options: planList,
        value: plan ? plan.reference : null,
        readonly: true,
        class: 'plan-select-'~gateway.id
      }) }}

      <div class="btn stripe-refresh-plans">{{ "Refresh"|t('commerce-stripe') }}</div>
      <div class="spinner hidden"></div>
    </div>
  {% endset %}

  {{ field({
    label: "Gateway plan"|t('app'),
    instructions: "Which gateway subscription plan do you want to use?"|t('commerce-stripe'),
    id: 'plan',
    errors: plan ? plan.getErrors('reference') : null,
  }, planInput) }}
</div>

{% do view.registerAssetBundle("craft\\commerce\\stripe\\web\\assets\\plansettings\\PlanSettingsAsset") %}