%fieldset.no-border-bottom
  %legend{ align: 'center'}= t("admin.subscriptions.form.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
    .columns.alpha.field{ ng: { class: '{four: cardRequired, seven: !cardRequired}' } }
      %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 }}
    .three.columns.field{ ng: { show: 'cardRequired' } }
      %label{ for: 'credit_card_id'}= t('.credit_card')
      %input.ofn-select2.fullwidth#credit_card_id{ name: 'credit_card_id', type: 'number', data: 'creditCards', text: 'formatted', placeholder: t('admin.choose'), ng: { model: 'subscription.credit_card_id', required: "cardRequired" } }
      .error{ ng: { show: 'creditCards.$promise && creditCards.$resolved && creditCards.length == 0' } }= t('.no_cards_available')
      .error{ ng: { show: 'subscription_form.$submitted && subscription_details_form.credit_card_id.$error.required' } }= t(:error_required)
      .error{ ng: { repeat: 'error in errors.credit_card', show: 'subscription_details_form.credit_card_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: 'Select A Date', 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: 'Optional', 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 }}