{% extends 'base.html' %}

{% load propeller %}

{% block title %}
    Propeller Buttons
{% endblock %}

{% block content %}

    {#  Default buttons example  #}
    <div class="pmd-card pmd-card-media-inline pmd-card-default pmd-z-depth">
        <div class="pmd-card-media">
            <div class="media-body">
                <h2 class="pmd-card-title-text">Default Propeller Button</h2>
                <span class="pmd-card-subtitle-text">propeller_button 'button'</span>
            </div>
        </div>
        <div class="pmd-card-actions">
            {% propeller_button 'button' %}
            {% propeller_button 'button' button_class='btn-primary' %}
            {% propeller_button 'button' button_class='btn-success' %}
            {% propeller_button 'button' button_class='btn-info' %}
            {% propeller_button 'button' button_class='btn-warning' %}
            {% propeller_button 'button' button_class='btn-danger' %}
            {% propeller_button 'button' button_class='btn-link' %}
        </div>
    </div>

    {#  Raised buttons example  #}
    <div class="pmd-card pmd-card-media-inline pmd-card-default pmd-z-depth">
        <div class="pmd-card-media">
            <div class="media-body">
                <h2 class="pmd-card-title-text">Raised Button</h2>
                <span class="pmd-card-subtitle-text">propeller_button 'button' style='raised'</span>
            </div>
        </div>
        <div class="pmd-card-actions">
            {% propeller_button 'button' style='raised' %}
            {% propeller_button 'button' style='raised' button_class='btn-primary' %}
            {% propeller_button 'button' style='raised' button_class='btn-success' %}
            {% propeller_button 'button' style='raised' button_class='btn-info' %}
            {% propeller_button 'button' style='raised' button_class='btn-warning' %}
            {% propeller_button 'button' style='raised' button_class='btn-danger' %}
            {% propeller_button 'button' style='raised' button_class='btn-link' %}
        </div>
    </div>

    {#  Flat buttons example  #}
    <div class="pmd-card pmd-card-media-inline pmd-card-default pmd-z-depth">
        <div class="pmd-card-media">
            <div class="media-body">
                <h2 class="pmd-card-title-text">Flat Button</h2>
                <span class="pmd-card-subtitle-text">propeller_button 'button' style='flat'</span>
            </div>
        </div>
        <div class="pmd-card-actions">
            {% propeller_button 'button' style='flat' %}
            {% propeller_button 'button' style='flat' button_class='btn-primary' %}
            {% propeller_button 'button' style='flat' button_class='btn-success' %}
            {% propeller_button 'button' style='flat' button_class='btn-info' %}
            {% propeller_button 'button' style='flat' button_class='btn-warning' %}
            {% propeller_button 'button' style='flat' button_class='btn-danger' %}
            {% propeller_button 'button' style='flat' button_class='btn-link' %}
        </div>
    </div>

    {#  Outline buttons example  #}
    <div class="pmd-card pmd-card-media-inline pmd-card-default pmd-z-depth">
        <div class="pmd-card-media">
            <div class="media-body">
                <h2 class="pmd-card-title-text">Outline Button</h2>
                <span class="pmd-card-subtitle-text">propeller_button 'button' style='outline'</span>
            </div>
        </div>
        <div class="pmd-card-actions">
            {% propeller_button 'button' style='outline' %}
            {% propeller_button 'button' style='outline' button_class='btn-primary' %}
            {% propeller_button 'button' style='outline' button_class='btn-success' %}
            {% propeller_button 'button' style='outline' button_class='btn-info' %}
            {% propeller_button 'button' style='outline' button_class='btn-warning' %}
            {% propeller_button 'button' style='outline' button_class='btn-danger' %}
            {% propeller_button 'button' style='outline' button_class='btn-link' %}
        </div>
    </div>

{% endblock %}