content: import React from 'react';
  import {Link} from 'react-router';
  import forms from 'newforms';
  import formIsComplete from 'utility/formIsComplete';
  import _ from 'lodash';
  
  const distributionPlatforms = [['', 'Distribution Platform'], 'encompass', 'vip'];
  
  
  const AddConfigForm = forms.Form.extend({
    distribution_platform: forms.ChoiceField({choices: distributionPlatforms, required: true}),
    report_name: forms.CharField({required: true}),
    report_url: forms.CharField({required: false}),
    config_expiration: forms.CharField({required: false}),
    vip_id: forms.CharField({required: false}),
    email: forms.CharField({required: false, validation: {on: 'blur'}}),
    password: forms.CharField({required: false, validation: {on: 'onChange blur', onChangeDelay: 100}, widget: forms.PasswordInput}),
    labelSuffix: '',
    requiredCssClass: 'required',
    optionalCssClass: 'optional',
    errorCssClass: 'error',
    validCssClass: 'valid',
    render(props, state, error, togglePasswordVisibility) {
      const fields = this.boundFieldsObj();
      const isValid = formIsComplete(this);
      const awaitingSave = _.get(state, 'loading');
      return (
        <div className="form-container">
          
          <div className={fields.report_name.cssClasses() + ` ${this.data.report_name ? 'active-data' : ''} field-group`}>
            {fields.report_name.render({attrs: {placeholder: 'Report name', autoComplete: false}})}
          </div>
  
          <div className={fields.distribution_platform.cssClasses() + ' select-wrapper ' + ` ${this.data.distribution_platform ? 'active-data' : ''} field-group`}>
            {fields.distribution_platform.render({attrs: {placeholder: 'Distribution platform (encompass, csi)', autoComplete: false}})}
          </div> 
          {
            false ?
            <div className={fields.email.cssClasses() + ` ${this.data.email ? 'active-data' : ''} field-group`}>
              {fields.email.render({attrs: {placeholder: 'Platform email / username', autoComplete: false}})}
            </div> : null
          }
          {
            false ?
            <div className={fields.password.cssClasses() + ` ${this.data.password ? 'active-data' : ''} field-group`}>
              {fields.password.render({attrs: {placeholder: 'Platform password', autoComplete: false}})}
            </div> : null
          }
  
  
          {
            this.data.distribution_platform === 'vip' ?
            <div className={fields.vip_id.cssClasses() + ` ${this.data.vip_id ? 'active-data' : ''} field-group`}>
              {fields.vip_id.render({attrs: {placeholder: 'VIP Id', autoComplete: false}})}
            </div> : null
          }
          
          {
            this.data.distribution_platform === 'encompass' ?
            <div className={fields.report_url.cssClasses() + ` ${this.data.report_url ? 'active-data' : ''} field-group`}>
              {fields.report_url.render({attrs: {placeholder: 'Report url', autoComplete: false}})}
            </div> : null
          }
  
          {
            this.data.distribution_platform === 'encompass' ?
            <div className={fields.config_expiration.cssClasses() + ` ${this.data.config_expiration ? 'active-data' : ''} field-group`}>
              {fields.config_expiration.render({attrs: {type: 'date', placeholder: 'Report Expiration', autoComplete: false}})}
            </div> : null
          }
          
          <div className="button-wrapper split">
            <button className="primary-btn-large" disabled={awaitingSave || !isValid}>
              {
                awaitingSave ?
                <div>loading</div> : <div>Add Report Configuration</div>
              }
            </button>
          </div>
          {
            error ?
            <div className="error">
              <span className="note">{error}</span>
            </div> : null
          }
        </div>
      );
    }
  });
  
  export default AddConfigForm;