voom-presenters 0.2.0 → 2.0.0

data/views/mdc/components/slider.erb

@@ -11,11 +11,13 @@
      <% if comp.step %>
      data-step="<%= comp.step %>"
      <% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
      aria-valuemin="<%= comp.value_min %>"
      aria-valuemax="<%= comp.value_max %>"
      aria-valuenow="<%= comp.value unless comp.value.nil? %>"
+     <% if comp.disabled %>aria-disabled<% end %>
      aria-label="Select Value"
-    <%= erb :"components/event", :locals => {events: comp.events, parent_id: "#{comp.id}-input"} %>>
+    <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: "#{comp.id}-input"} %>>
 <div class="mdc-slider__track-container">
     <div class="mdc-slider__track"></div>
 

data/views/mdc/components/stepper.erb

@@ -6,7 +6,7 @@
       <% if comp.tag %>
       data-input-tag="<%= comp.tag %>"
       <% end %>
-      class="mdl-stepper v-stepper v-has-errors
+      class="mdl-stepper v-stepper
             <%= ' mdl-stepper--horizontal' if horizontal %>
             <%= ' mdl-stepper--linear' if comp.linear %>">
     <% for step in comp.steps %>

data/views/mdc/components/stepper/step.erb

@@ -12,7 +12,7 @@
 
   <% if vertical %>
     <div id="<%= comp.id %>-content"
-      class="mdl-step__content v-content v-has-errors">
+      class="mdl-step__content v-content">
         <%= erb :"components/render", :locals => {:components => comp.components, :scope => nil} %>
     </div>
   <% end %>

data/views/mdc/components/switch.erb

@@ -1,11 +1,10 @@
 <% class_name = '' unless local_variables.include? :class_name
 %>
 
-<div class="mdc-form-field">
+<div class="v-form-field mdc-form-field">
   <div id="<%= comp.id %>"
-       <% if comp.tag %>
-       data-input-tag="<%= comp.tag %>"
-       <% end %>
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
        class="v-switch v-input mdc-switch
       <%= 'mdc-switch--disabled' if comp.disabled %>
       <%= class_name %>">
@@ -17,9 +16,11 @@
                type="checkbox"
                class="mdc-switch__native-control"
                role="switch"
-               <% if comp.checked %> checked
-        <% end %>
-               <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>/>
+               <% if comp.value %>value="<%= comp.value %>"<% end %>
+               data-off="<%= comp.off_value %>"
+               <%= ' checked ' if comp.checked %>
+               <%= ' disabled ' if comp.disabled %>
+               <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>/>
       </div>
     </div>
   </div>

data/views/mdc/components/tab_bar.erb

@@ -9,7 +9,7 @@
                     <%= 'mdc-tab--active' if tab.selected %>
                     <%= 'mdc-tab--stacked' if tab.stacked %>"
                   role="tab" aria-selected="<%= tab.selected %>" tabindex="0"
-                  <%= erb :"components/event", :locals => {events: tab.events, parent_id: tab.event_parent_id}%>>
+                  <%= erb :"components/event", :locals => {comp: tab, events: tab.events, parent_id: tab.event_parent_id}%>>
           <span class="mdc-tab__content">
            <% if tab.icon %>
             <span class="mdc-tab__icon material-icons"><%= tab.icon %></span>
@@ -27,3 +27,9 @@
     </div>
   </div>
 </div>
+<% comp.tabs.each_with_index do |tab, index|
+  next unless tab.components.any? %>
+  <div class="v-tab-content <%=tab.selected ? nil : 'v-hidden' %>" data-tab-id="<%=index%>">
+    <%= erb :"components/render", :locals => {:components => tab.components, :scope=> nil} if tab.components.any? %>
+  </div>
+<% end %>

data/views/mdc/components/table.erb

@@ -1,15 +1,28 @@
-<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
-  <% if comp.header %>
-    <thead>
-      <%= erb :"components/table/header", :locals => {:row=> comp.header} %>
-    </thead>
-  <% end %>
-  <tbody>
-      <% comp.rows.each do |row| %>
-        <%= erb :"components/table/row", :locals => {:row=> row} %>
-      <% end %>
-  </tbody>
-</table>
+<div class="v-data-table mdc-data-table <%= 'v-no-border' unless comp.border %>" style="<%= "width:#{comp.width};" if comp.width %>">
+  <table class="mdc-data-table__table"
+         <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} %>>
+    <% if comp.header %>
+      <thead>
+      <%= erb :"components/table/header", :locals => {:row => comp.header} %>
+      </thead>
+    <% else
+      # This is a workaround for the MDCDataTable component that currently throws an error if it can't find an
+      # mdc-data-table__header-row element. Allos us to create headerless table without JS errors
+    %>
+      <div class="mdc-data-table__header-row v-hidden"/>
+    <% end %>
+    <tbody class="mdc-data-table__content">
+    <% comp.rows.each do |row| %>
+      <%= erb :"components/table/row", :locals => {:row => row} %>
+    <% end %>
+    </tbody>
+    <% if comp.footer %>
+      <tfoot>
+        <%= erb :"components/table/footer", :locals => {:row => comp.footer} %>
+      </tfoot>
+    <% end %>
+  </table>
+</div>
 <% if comp.pagination %>
-  <%= erb :"components/table/pagination", :locals => {:comp=> comp.pagination} %>
+  <%= erb :"components/table/pagination", :locals => {:comp => comp.pagination} %>
 <% end %>

data/views/mdc/components/table/checkbox.erb

@@ -1,14 +1,17 @@
 <% if row.checkbox %>
   <% if type == 'header' %>
-    <th>
+    <th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
   <% else %>
-    <td style="<%= "background-color: #{row.color};" if row.color %>">
+    <td style="<%= "background-color: #{row.color};" if row.color %>" class="mdc-data-table__cell mdc-data-table__cell--checkbox">
   <% end %>
+  <% unless type == 'footer' %>
     <span class="mdc-list-item__graphic">
       <%= erb :"components/checkbox",
               :locals => {comp: row.checkbox,
-                          class_name: (type == 'header' ? 'v-checkbox--select-control' : 'v-table-item--selectable-checkbox')} %>
+                          class_name: (type == 'header' ? 'v-checkbox--select-control' : 'v-table-item--selectable-checkbox'),
+                          data_table_class_name: (type == 'header' ? 'mdc-data-table__header-row-checkbox' : 'mdc-data-table__row-checkbox')}  %>
     </span>
+  <% end %>
   <% if type == 'header' %>
     </th>
   <% else %>

data/views/mdc/components/table/column.erb

@@ -0,0 +1,18 @@
+<% if type == 'header' %>
+  <th
+<% else %>
+  <td
+<% end %>
+    id="<%= col.id%>"
+    class="<%= 'mdl-data-table__cell--non-numeric' unless col.numeric? %>
+               <%= 'v-actionable' if col.events %>"
+    <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id}%>
+    style="<%= "background-color: #{col.color};" if col.color %>"
+    <%= " colspan=#{col.colspan}" if col.colspan %>>
+  <%= expand_text(col.value&.text) %>
+  <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
+<% if type == 'header' %>
+  </th>
+<% else %>
+  </td>
+<% end %>

data/views/mdc/components/table/footer.erb

@@ -0,0 +1,8 @@
+<tr
+  style="<%= "background-color: #{row.color};" if row.color %>">
+  <%= erb :"components/table/checkbox", :locals => {:row=> row, :type=> 'footer'} %>
+  <% row.columns.each do |col| %>
+    <%= erb :"components/table/column", :locals => {:col=> col, :type=> 'footer'} %>
+    <%= erb :"components/tooltip", :locals => {comp: col.tooltip, parent_id: col.id} %>
+  <% end %>
+</tr>

data/views/mdc/components/table/header.erb

@@ -1,16 +1,17 @@
-<tr
+<tr class="mdc-data-table__header-row"
   style="<%= "background-color: #{row.color};" if row.color %>">
   <%= erb :"components/table/checkbox", :locals => {:row=> row, :type=> 'header'} %>
   <% row.columns.each do |col| %>
     <th id="<%= col.id%>"
-        class="<%= 'mdl-data-table__cell--non-numeric' unless col.numeric %>
+        class="mdc-data-table__header-cell
+               <%= "v-align-#{col.align}" %>
                <%= 'v-actionable' if col.events %>"
-        <%= erb :"components/event", :locals => {events: col.events, parent_id: col.event_parent_id}%>
+        role="columnheader" scope="col"
+        <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id}%>
         style="<%= "background-color: #{col.color};" if col.color %>">
       <%= expand_text(col.value&.text) %>
       <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
     </th>
     <%= erb :"components/tooltip", :locals => {comp: col.tooltip, parent_id: col.id} %>
-
   <% end %>
 </tr>

data/views/mdc/components/table/pagination.erb

@@ -6,10 +6,6 @@
   <span class="v-paging__count">
     <%= comp.range&.join(' - ') %> of <%= comp.total %>
   </span>
-  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon v-paging__prev">
-    <%= erb :"components/icon", :locals => {:comp=>comp.previous_button} %>
-  </button>
-  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon v-paging__next">
-    <%= erb :"components/icon", :locals => {:comp=>comp.next_button} %>
-  </button>
+  <%= erb :'components/button', locals: { comp: comp.previous_button, class_name: 'v-actionable v-button--pagination v-button--pagination--previous v-paging__prev' } %>
+  <%= erb :'components/button', locals: { comp: comp.next_button, class_name: 'v-actionable v-button--pagination v-button--pagination--next v-paging__next' } %>
 </div>

data/views/mdc/components/table/row.erb

@@ -1,16 +1,16 @@
-<tr
+<tr id="<%= row.id %>" class="mdc-data-table__row"
   style="<%= "background-color: #{row.color};" if row.color %>">
   <%= erb :"components/table/checkbox", :locals => {:row=> row, :type=> 'row'} %>
   <% row.columns.each do |col| %>
     <td id="<%= col.id%>"
-        class="<%= 'mdl-data-table__cell--non-numeric' unless col.numeric %>
+        class="mdc-data-table__cell
+               <%= "v-align-#{col.align}" %>
                <%= 'v-actionable' if col.events %>"
-        <%= erb :"components/event", :locals => {events: col.events, parent_id: col.event_parent_id}%>
+        <%= erb :"components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id}%>
         style="<%= "background-color: #{col.color};" if col.color %>">
-      <%= expand_text(col.value&.text) %>
+      <%= expand_text(col.value&.text, markdown: col.value&.markdown) %>
       <%= erb :"components/render", :locals => {:components => col.components, :scope => nil} %>
     </td>
     <%= erb :"components/tooltip", :locals => {comp: col.tooltip, parent_id: col.id} %>
-
   <% end %>
 </tr>

data/views/mdc/components/text_area.erb

@@ -1,20 +1,18 @@
 <div id="<%= comp.id %>" class="v-input v-text-field mdc-text-field mdc-text-field--textarea
-            <%= ' is-invalid is-dirty' if comp.error%>"
-     <% if comp.tag %>
-     data-input-tag="<%= comp.tag %>"
-     <% end %>
+            <% if comp.disabled %>mdc-text-field--disabled<% end %>"
+     <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
      style="<%= 'width:100%' if comp.full_width %>">
   <textarea id="<%= comp.id %>-input"
             name="<%= comp.name %>"
             class="mdc-text-field__input"
+            aria-controls="<%= comp.id %>-input-helper-text"
+            <%= 'required' if comp.required %>
             rows="<%= comp.rows %>"
-            cols="<%= comp.cols %>"> <%= comp.value %> </textarea>
-  <label for="<%= comp.id %>-input" class="mdc-floating-label"><%= expand_text(comp.label) %></label>
+            cols="<%= comp.cols %>"
+            <% if comp.disabled %>disabled<% end %>><%= comp.value %></textarea>
+  <%= erb :"components/shared/input_label", :locals => {comp: comp} %>
 </div>
-<% if comp.error || comp.hint %>
-<p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">
-  <%= comp.error || comp.hint %>
-</p>
-<% end %>
+<%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 

data/views/mdc/components/text_field.erb

@@ -1,47 +1,39 @@
 <% if comp
-     leading_icon = comp.icon && comp.icon.position.select{|p| eq(p, :left)}.any?
-     trailing_icon = comp.icon && comp.icon.position.select{|p| eq(p, :right)}.any?
+     leading_icon = comp.icon && comp.icon.position.select {|p| eq(p, :left)}.any?
+     trailing_icon = comp.icon && comp.icon.position.select {|p| eq(p, :right)}.any?
+     auto_complete = comp.auto_complete&.to_sym == :off ? 'extra-off' : comp.auto_complete
+     behavior = comp.behavior || 'text'
 %>
   <div id="<%= comp.id %>"
-       <% if comp.tag %>
-       data-input-tag="<%= comp.tag %>"
-       <% end %>
-       class="v-input v-text-field mdc-text-field mdc-text-field--outlined
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       class="v-input v-text-field v-focusable mdc-text-field mdc-text-field--outlined
             <%= 'mdc-text-field--with-leading-icon' if leading_icon %>
             <%= 'mdc-text-field--with-trailing-icon' if trailing_icon %>
-            <%= 'mdc-text-field--disabled' if comp.disabled %>
-            <%= 'is-invalid is-dirty' if comp.error %>"
-            style="<%= 'width:100%' if comp.full_width %>">
+            <%= 'mdc-text-field--disabled' if comp.disabled %>"
+            data-case_type="<%= comp.case_type %>"
+       style="<%= 'width:100%' if comp.full_width %>">
 
-  <input id="<%= comp.id %>-input"
-         name="<%= comp.name %>"
-         type="<%= comp.password ? 'password' : 'text' %>"
-         value="<%= comp.value %>"
-         class="mdc-text-field__input"
-         aria-controls="<%= comp.id %>-input-helper-text"
-         <%= 'required' if comp.required %>
-         <%= 'invalid' if comp.error %>
-         <%= "pattern='#{comp.pattern}'" if comp.pattern %>
-         autocomplete="<%= comp.auto_complete ? 'on' : 'off'%>"
-         list="<%= comp.id %>-list"
-         <%= erb :"components/event", :locals => {events: comp.events, parent_id:  "#{comp.id}-input"} %>>
+    <input id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           <%= behavior %>
+           value="<%= comp.value %>"
+           class="mdc-text-field__input"
+           aria-controls="<%= comp.id %>-input-helper-text"
+           <% if comp.disabled %>disabled<% end %>
+           <%= 'required' if comp.required %>
+           <%= "pattern='#{comp.pattern}'" if comp.pattern %>
+           autocomplete="<%= auto_complete %>"
+           list="<%= comp.id %>-list"
+           <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id:  "#{comp.id}-input"} %>>
 
-  <label class="mdc-floating-label" for="<%= comp.id %>-input"><%= comp.label %></label>
-  <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
-  <div class="mdc-notched-outline">
-    <svg>
-      <path class="mdc-notched-outline__path"/>
-    </svg>
+    <%= erb :"components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} %>
+
+    <%= erb :"components/shared/input_label", :locals => {comp: comp} %>
+    <datalist id="<%= comp.id %>-list">
+    </datalist>
   </div>
-  <div class="mdc-notched-outline__idle"></div>
-  <datalist id="<%= comp.id %>-list">
-  </datalist>
-</div>
-<% if comp.error || comp.hint %>
-<p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">
-  <%= comp.error || comp.hint %>
-</p>
-<% end %>
-<%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
+  <%= erb :"components/shared/hint_error_display", :locals => {comp: comp} %>
+  <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
 <% end %>
 

data/views/mdc/components/tooltip.erb

@@ -1,5 +1,5 @@
 <% if comp %>
-<div class="mdl-tooltip mdl-tooltip--<%=comp.position%>" for="<%=parent_id%>">
+<div class="v-tooltip mdl-tooltip mdl-tooltip--<%=comp.position%>" for="<%=parent_id%>">
   <%=expand_text(comp.text.text)%>
 </div>
-<% end %>
+<% end %>

data/views/mdc/components/typography.erb

@@ -2,12 +2,14 @@
    position_classes = comp.position.map {|p| "v-typography-position-#{p}"}.join(' ')
 %>
 <div id="<%= comp.id %>"
-     class="mdc-typography--<%= "#{type}#{comp.level}" %>
+     class="v-typography mdc-typography--<%= "#{type}#{comp.level}" %>
            <%= class_name %>
            <%= position_classes %>
            <%= 'v-actionable' if comp.events %>"
-     style = "<%= "color: #{comp.color};" if comp.color %>"
-     <%= erb :"components/event", :locals => {events: comp.events, parent_id: comp.event_parent_id} %>>
-  <%= expand_text(comp.text) %></div>
+     style = "<%= "color: #{comp.color};" if comp.color %>
+              <%= "display: inline;" if comp.inline %>"
+     <%= erb :"components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} %>>
+  <%= erb :"components/icon", :locals => {comp: comp.icon} if comp.icon %>
+  <%= expand_text(comp.text, markdown: comp.markdown) %>
+</div>
 <%= erb :"components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} %>
-<%= erb :"components/icon", :locals => {comp: comp.icon} if comp.icon %>

data/views/mdc/components/unordered_list.erb

@@ -0,0 +1,10 @@
+<ul id="<%= comp.id %>"
+  <% if comp.list_items.map{|li| li.icon ? 1 : 0}.sum > 0 %>
+    class="icon-ul"
+  <% else %>
+    style="<%= "list-style: #{comp.list_style}" if comp.list_style %>"
+  <% end %>>
+<% for item in comp.list_items %>
+  <%= erb :"components/unordered_list/list_item", :locals => {:list_item => item} %>
+<% end %>
+</ul>

data/views/mdc/components/unordered_list/icon.erb

@@ -0,0 +1,3 @@
+<%if list_item.icon%>
+  <%= erb :"components/icon", :locals => {comp: list_item.icon, class_name: 'icon-li'} %>
+<%end%>

data/views/mdc/components/unordered_list/list_item.erb

@@ -0,0 +1,7 @@
+<li class="<%= 'icon-li' if list_item.icon %>">
+  <%= erb :"components/unordered_list/icon", :locals => {:list_item => list_item} %>
+  <%= expand_text(list_item.text&.text) %>
+  <% if list_item.unordered_list %>
+    <%= erb :"components/unordered_list", :locals => {:comp => list_item.unordered_list} %>
+  <% end %>
+</li>

data/views/mdc/layout.erb

@@ -7,47 +7,59 @@
   <title><%= @pom.page.title if @pom.page %></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
   <!-- Place favicon.ico in the root directory -->
   <!--MDC-->
-  <link rel="stylesheet" href="<%= env['SCRIPT_NAME'] %>/bundle.css">
-  <script defer src="<%= env['SCRIPT_NAME'] %>/bundle.js"></script>
-  <%= custom_css %>
-
+  <link rel="stylesheet" href="<%= @base_url %>/<%= env['SCRIPT_NAME'] %>bundle.css">
+  <script defer src="<%= @base_url %>/<%= env['SCRIPT_NAME'] %>bundle.js"></script>
+  <%= plugin_headers(@pom) %>
+  <%= custom_css(env['REQUEST_PATH'], @base_url) %>
+  <%= @pom.csrf_meta_tags %>
 </head>
 <body class="mdc-typography">
-<div class="compatibility-wrapper">
-  <% header = @pom.header
-     drawer = @pom.drawer
-     footer = @pom.footer %>
-  <div class="mdl-layout mdl-js-layout
-    <% if header %>mdl-layout--fixed-header
-    <% end %>
-    <% if drawer %>mdl-layout--fixed-drawer
-    <% end %>">
-    <% if header %>
-      <%= erb :"body/header", :locals => {:header => header} %>
-    <% end %>
-    <% if drawer %>
-      <%= erb :"body/drawer", :locals => {:drawer => drawer} %>
-    <% end %>
-    <main class="mdl-layout__content"
-          style="<%= "background-color:#{@pom.page.background_color}" if @pom.page&.background_color %>">
-      <div class="page-content">
-        <div class="v-errors">
-          <%= yield %>
-        </div>
-      </div>
-    </main>
+<%
+  header = @pom.header
+  drawer = @pom.drawer
+  footer = @pom.footer
+
+  root_classes = []
+  root_classes << 'v-root--header-present' if header
+  root_classes << 'v-root--drawer-present' if drawer
+  root_classes << 'v-root--footer-present' if footer
+%>
+<div class="v-root compatibility-wrapper mdc-typography <%= root_classes.join(' ') %>">
+
+<% if drawer %>
+  <div class="drawer-frame-root">
+    <%= erb :"body/dismissable-drawer", :locals => {drawer: drawer} %>
+    <div class="mdc-drawer-app-content">
+<% end %>
+<% if header %>
+  <%= erb :"body/header", :locals => {header:header, drawer: drawer} %>
+<% end %>
+  <% if drawer %>
+    <div class="drawer-main-content">
+      <%= erb :"body/modal-drawer", :locals => {drawer: drawer} %>
+  <% end %>
+<div class="v-page-content page-content">
+  <div class="v-errors">
+    <%= yield %>
+  </div>
+</div>
+<% if drawer %>
+    </div>
+  </div>
+</div>
+<% end %>
+
     <%= erb :"body/snackbar" %>
     <% if footer %>
       <%= erb :"body/footer", :locals => {:footer => footer} %>
     <% end %>
-  </div>
 </div>
+
 <noscript><p>JavaScript must be enabled to continue.</p></noscript>
 </body>
 </html>