import React from 'react';
import { Modal } from 'react-bootstrap';


export default class ListSignupFormCreator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      subscribeKey: this.props.subscribeKey,
      showModal: false
    };
  }

  showModal() {
    this.setState({
      showModal: true
    });
  }

  componentWillReceiveProps(props) {
    this.setState({
      showModal: props.showModal,
      subscribeKey: props.subscribeKey
    })
  }

  closeModal() {
    this.setState({
      showModal: false
    });
  }

  render() {
    const actionUrl = `${window.location.origin}/api/list/subscribe`;

    return (
      <Modal show={this.state.showModal} onHide={this.closeModal.bind(this)}>
        <div className="modal-content">
          <div className="modal-header">
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div className="modal-body">
            {`
              <form action="${actionUrl}" target="_blank">
              <label for="signup-email">Email</label>
              <input type="email" value="" name="email" label="signup-email">
              <input type="hidden" name="subscribeKey" value="${this.state.subscribeKey}" />
              <input type="submit" value="Subscribe" name="Subscribe">
              </form>
            `}
          </div>
          <div className="modal-footer">Footer</div>
        </div>
      </Modal>
    );
  }
}


@@ -829,17 +829,17 @@
       %3Ch
-4
+3
  class=%22
@@ -855,23 +855,40 @@
 le%22%3E
-Modal title%3C/h4
+Embeddable subscription form%3C/h3
 %3E%0A  
@@ -941,16 +941,204 @@
 -body%22%3E%0A
+            %3Ch4%3EAllow users to sign up to your mailing list by embedding this HTML code into your website%3C/h4%3E%0A            %3Cbr/%3E%0A            %3Ctextarea className=%22form-control%22 rows=%225%22%3E%0A  
         
@@ -1536,16 +1536,40 @@
      %60%7D%0A
+            %3C/textarea%3E%0A
         
@@ -1621,14 +1621,8 @@
 er%22%3E
-Footer
 %3C/di

Add instructions and improve formatting