<ons-page id="page1">

<ons-toolbar id="tb1">
	<div class="left" id="tb1_leftDiv">
		<ons-toolbar-button><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
	</div>
    <div class="center" id="tb1_centerDiv">
     	My Application
    </div>

</ons-toolbar>

<ons-card>
    <div class="title">
      Awesome framework
    </div>
    <div class="content">
      <ons-list>
        <ons-list-header>Bindings</ons-list-header>
        <ons-list-item>Vue</ons-list-item>
        <ons-list-item>Angular</ons-list-item>
        <ons-list-item>React</ons-list-item>
      </ons-list>
    </div>
  </ons-card>

<ons-button id="mybutton" modifier="$modifier" onclick="mybutton_click();" style="margin: 8px;">
<ons-icon icon="fa-question"></ons-icon> Find Out More
</ons-button>
</ons-page>


<script>
var createAlertDialog = function() {
  var dialog = document.getElementById('my-alert-dialog');
  console.log('show');
  if (dialog) {
    dialog.show();
  } else {
    ons.createElement('alert-dialog.html', { append: true })
      .then(function(dialog) {
        dialog.show();
      });
  }
};

var hideAlertDialog = function() {
  document
    .getElementById('my-alert-dialog')
    .hide();
  console.log('hide');
};

function mybutton_click() {

createAlertDialog();

}

</script>

<template id="alert-dialog.html">
  <ons-alert-dialog id="my-alert-dialog" modifier="rowfooter">
    <div class="alert-dialog-title">Alert</div>
    <div class="alert-dialog-content">
      This dialog was created from a template
    </div>
    <div class="alert-dialog-footer">
      <ons-alert-dialog-button onclick="hideAlertDialog();">Cancel</ons-alert-dialog-button>
      <ons-alert-dialog-button onclick="hideAlertDialog()">OK</ons-alert-dialog-button>
    </div>
  </ons-alert-dialog>
</template>