[% USE P %]

<h1>Material Components Tests</h1>


<h2>Buttons</h2>

[% P.M.button_tag("", "button") %]
[% P.M.button_tag("", P.M.icon('add'), floating=1) %]
[% P.M.submit_tag("", "submit") %]
[% P.M.submit_tag("", "disabled submit", disabled=1) %]
[% P.M.button_tag("", "button with left icon", icon="cloud", icon_left=1) %]
[% P.M.button_tag("", "button with right icon", icon="save", icon_right=1) %]
[% P.M.button_tag("", "flat button", flat=1) %]
[% P.M.button_tag("", "large button", large=1) %]
[% P.M.button_tag("", "small button", small=1) %]
[% P.M.button_tag("", "disabled small button", disabled=1, small=1) %]

<h2>Icons</h2>

[% P.M.icon("alarm") %]
[% P.M.icon("alarm", large=1) %]
[% P.M.icon("alarm", medium=1) %]
[% P.M.icon("alarm", small=1) %]
[% P.M.icon("alarm", tiny=1) %]

<h2>Inputs</h2>


[% P.M.input_tag("", "", label="test input without anything") %]
[% P.M.input_tag("", "default value", label="test input with default value") %]
[% P.M.input_tag("", "", placeholder="with placeholder", label="test input with placeholder") %]
[% P.M.input_tag("", "default value", placeholder="with placeholder", label="test input with placeholder and default value") %]

<h3>With grid:</h3>
<div class="row">
[% P.M.input_tag("", "", label="2 cols", class="col s6") %]
[% P.M.input_tag("", "", label="2 cols", class="col s6") %]
[% P.M.input_tag("i1", "", placeholder="2 cols placeholder", icon="phone", class="col s6") %]
[% P.M.input_tag("i2", "", label="2 cols label", icon="account_circle", class="col s6") %]
</div>

<h2>Date Picker</h2>

<div class="row">
[% P.M.date_tag("d1", "", label="date of birth", class="col s6", icon="date_range") %]
[% P.M.date_tag("d1", "", class="col s6", placeholder="date of birth?", icon="access_time") %]
</div>