link rel="import" href="/components/polymer/polymer.html">

<dom-module id="lms-profile-edit-education">

  <template>
    
    <style is="custom-style" include="shared-styles"></style>
    <style is="custom-style" include="lms-forms-styles"></style>
    <style is="custom-style" include="lms-grid"></style>
    
    <style>
      :host { 
        display: block;
        position: relative;
        max-width: 750px;
      }
      :host ::content [data-form-remove] {
        position: absolute;
        right: 0;
        transition: all .2s ease-out;
        opacity: 0;
        visibility: hidden;
        color: #ccc;
        cursor: pointer;
      }
      :host ::content [data-form-group] {
        padding-right: 40px;
      }
      :host ::content [data-form-group]:hover [data-form-remove] {
        opacity: 1;
        visibility: visible;
      }
    </style>

    <content select=".education"></content>

    <paper-toast id="notifyMain"></paper-toast>
    
  </template>
  <script>
    Polymer({
      is: 'lms-profile-edit-education',
      behaviors: [LmsProfileEditBehavior],
      preSubmit: function(event) {
        this.serialize();
      }
    });
  </script>
</dom-module>