%fieldset.no-border-bottom
  %legend{ align: 'center'}= t(".details")
  .row
    .seven.columns.alpha.field
      %label{ for: 'customer_id'}= t('admin.customer')
      %input.ofn-select2.fullwidth#customer_id{ name: 'customer_id', type: 'number', data: 'customers', text: 'email', required: true, placeholder: t('admin.choose'), "ng-model": 'subscription.customer_id', "ng-disabled": 'subscription.id' }
      .error{ "ng-show": 'subscription_form.$submitted && subscription_details_form.customer_id.$error.required' }= t(:error_required)
      .error{ "ng-repeat": 'error in errors.customer', "ng-show": 'subscription_details_form.customer_id.$pristine' } {{ error }}
    .two.columns &nbsp;
    .seven.columns.omega.field
      %label{ for: 'schedule_id'}= t('admin.schedule')
      %input.ofn-select2.fullwidth#schedule_id{ name: 'schedule_id', type: 'number', data: 'schedules', required: true, placeholder: t('admin.choose'), "ng-model": 'subscription.schedule_id', "ng-disabled": 'subscription.id' }
      .error{ "ng-show": 'subscription_form.$submitted && subscription_details_form.schedule_id.$error.required' }= t(:error_required)
      .error{ "ng-repeat": 'error in errors.schedule', "ng-show": 'subscription_details_form.schedule_id.$pristine' } {{ error }}

  .row
    .seven.columns.alpha.field
      %label{ for: 'payment_method_id'}
        = t('admin.payment_method')
        %span.with-tip.icon-question-sign{ data: { powertip: "#{t('.allowed_payment_method_types_tip')}" } }
      %input.ofn-select2.fullwidth#payment_method_id{ name: 'payment_method_id', type: 'number', data: 'paymentMethods', required: true, placeholder: t('admin.choose'), "ng-model": 'subscription.payment_method_id' }
      .error{ "ng-show": 'subscription_form.$submitted && subscription_details_form.payment_method_id.$error.required' }= t(:error_required)
      .error{ "ng-repeat": 'error in errors.payment_method', "ng-show": 'subscription_details_form.payment_method_id.$pristine' } {{ error }}
      .error{ "ng-show": 'cardRequired && customer.$promise && customer.$resolved && !customer.allow_charges' }= t('.charges_not_allowed')
      .error{ "ng-show": 'cardRequired && customer.$promise && customer.$resolved && customer.allow_charges && !customer.default_card_present' }= t('.no_default_card')
      .error{ "ng-repeat": 'error in errors.credit_card', "ng-show": 'subscription_details_form.payment_method_id.$pristine' } {{ error }}
    .two.columns &nbsp;
    .seven.columns.omega.field
      %label{ for: 'shipping_method_id'}= t('admin.shipping_method')
      %input.ofn-select2.fullwidth#shipping_method_id{ name: 'shipping_method_id', type: 'number', data: 'shippingMethods', required: true, placeholder: t('admin.choose'), "ng-model": 'subscription.shipping_method_id' }
      .error{ "ng-show": 'subscription_form.$submitted && subscription_details_form.shipping_method_id.$error.required' }= t(:error_required)
      .error{ "ng-repeat": 'error in errors.shipping_method', "ng-show": 'subscription_details_form.shipping_method_id.$pristine' } {{ error }}

  .row
    .seven.columns.alpha.field
      %label{ for: 'begins_at'}= t('admin.begins_at')
      %input.fullwidth#begins_at{ name: 'begins_at', type: 'text', placeholder: "#{t('.begins_at_placeholder')}", data: { controller: "flatpickr" }, required: true, "ng-model": 'subscription.begins_at' }
      .error{ "ng-show": 'subscription_form.$submitted && subscription_details_form.begins_at.$error.required' }= t(:error_required)
      .error{ "ng-repeat": 'error in errors.begins_at', "ng-show": 'subscription_details_form.begins_at.$pristine' } {{ error }}
    .two.columns &nbsp;
    .seven.columns.omega.field
      %label{ for: 'ends_at'}= t('admin.ends_at')
      %input.fullwidth#ends_at{ name: 'ends_at', type: 'text', placeholder: "#{t('.ends_at_placeholder')}", data: { controller: "flatpickr" }, "ng-model": 'subscription.ends_at' }
      .error{ "ng-repeat": 'error in errors.ends_at', "ng-show": 'subscription_details_form.ends_at.$pristine' } {{ error }}
