%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', 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', show: 'subscription_details_form.customer_id.$pristine' } } {{ error }}
    .two.columns  
    .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', 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', 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', 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', show: 'subscription_details_form.payment_method_id.$pristine' } } {{ error }}
    .two.columns  
    .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', 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')}", datepicker: 'subscription.begins_at', 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', show: 'subscription_details_form.begins_at.$pristine' } } {{ error }}
    .two.columns  
    .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')}", datepicker: 'subscription.begins_at', ng: { model: 'subscription.ends_at' } }
      .error{ ng: { repeat: 'error in errors.ends_at', show: 'subscription_details_form.ends_at.$pristine' } } {{ error }}