testing out vue stuff

templates/components/modal.html

@@ -1,9 +1,23 @@
-{% macro Modal() -%}
-  <div class='modal'>
-    <div class='modal__dialog' role='dialog' aria-modal='true'>
-      <div class='modal__body'>
-          {{ caller() }}
+{% from "components/icon.html" import Icon %}
+
+{% macro Modal(name, dismissable=False) -%}
+  <Modal inline-template ref={{ name }}>
+    <div v-if='active'>
+      <div class='modal' v-on:click='handleDismiss'>
+        <div class='modal__dialog' role='dialog' aria-modal='true'>
+
+          {% if dismissable %}
+            <button class='icon-link modal__dismiss' v-on:click='handleDismiss'>
+              {{ Icon('x') }}
+              <span>Close</span>
+            </button>
+          {% endif %}
+
+          <div class='modal__body'>
+              {{ caller() }}
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+  </Modal>
 {%- endmacro %}