my-datosusuario<!-- <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script> -->
<!-- <script src="../bower_components/web-animations-js/web-animations-next-lite.min.js"></script> -->
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animation.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-time-input/paper-time-input.html">

<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="component-form.html">
<link rel="import" href="component-formquestioncheck.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">


<dom-module id="my-datosusuario">
  <template>

    <iron-ajax id="ajaxPut" url="https://private-4e415e-basiccallsapi.apiary-mock.com/post" method="POST" body="{{form}}" handle-as="json" last-response="{{response}}" on-response="_ajaxResponse" last-error="{{error}}" on-error="_ajax_error"></iron-ajax>

  <style include="shared-styles">
  :host {
    display: block;
    padding: 16px;
  }
  paper-button {
    background-color: #02A5C9;
    color: white;
    margin-top: 17px;
  }
  .response {
    color: #02A5C9;
    display: inline-block;
  }
  .error {
    color: red;
    display: inline-block;
  }
  </style>
  <div class="card">
    <!--HEADER-->
    <h1>{{nameandlastname}}</h1>
    <component-formquestioncheck validated="{{validated}}" form="{{form}}"></component-formquestioncheck>

    <paper-button on-click="_submit" raised="">Enviar</paper-button>
    <p class="response">[[response]]</p>
    <p class="error">[[error]]</p>
    <!--
    <hal-questioncheck validated="{{validated}}" question="Cómo supo de Jenny" answers="Medio Impreso;Medio Electrónico;Compañero de Trabajo;Plática;RH;Área Médica;Supervisor;Sindicato;No proporcionado"></hal-questioncheck>
    -->

  </div><!--card ends-->

</template>
<script>// Your new element extends the Polymer.Element base class
class myDatosusuario extends Polymer.Element {
  static get is() {
    return 'my-datosusuario';
  }

  static get properties() {
    return {
      bandera: {
        type: Number,
        value: 0,
        notify: true
      },
      content: {
        notify: true,
        observer: "_content"
      },
      validated: {
        type: Boolean,
        value: false
      },
      user: {
        notify: true
      },
      userid: {
        type: String,
        notify: true,
        value: ""
      } // return Ends

    };
  } //Properties Ends


  ready() {
    super.ready();
  } //Ready ends


  _submit() {
    console.log(this.form);
    this.$.ajaxPut.generateRequest();
  }

  _content() {
    console.log(this.content);
  }

  _ajaxResponse() {
    console.log(this.response);
    this.response = this.response[0].response;
    this.error = "";
  }

  _ajax_error() {
    console.log(this.error);
    this.error = this.error.response.response;
    this.response = "";
  }

  _get_ajax() {}

  _PUT() {
    console.log("Ajax will generate the request");
    console.log(this.content);
    this.$.ajaxPut.generateRequest();
  }

} //Polymer Ends


customElements.define(myDatosusuario.is, myDatosusuario);</script>
</dom-module>