{% extends "base.twig" %}

{% block content %}
    <h1 class="mb-4">{{ global.welcomeMessage }}</h1>

    <section class="mb-5">
      <h2 class="mb-3">Typography</h2>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      <p>This is a paragraph of text. It demonstrates the default font size, line height, and color. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p class="small">This is a small paragraph of text.</p>
      <blockquote>
        <p>"The only way to do great work is to love what you do."</p>
        <footer class="blockquote-footer">Steve Jobs</footer>
      </blockquote>
    </section>

    <section class="mb-5">
      <h2 class="mb-3">Grid System</h2>
      <div class="row mb-3">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 bg-light border">Column 1</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 bg-light border">Column 2</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="p-3 bg-light border">Column 3</div>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="p-3 bg-light border">Half Width</div>
        </div>
        <div class="col-6">
          <div class="p-3 bg-light border">Half Width</div>
        </div>
      </div>
    </section>

    <section class="mb-5">
      <h2 class="mb-3">Buttons</h2>
      <div class="mb-3">
        {% include 'components/button.twig' with {text: 'Primary Button', class: 'btn-primary'} %}
        {% include 'components/button.twig' with {text: 'Secondary Button', class: 'btn-secondary'} %}
        {% include 'components/button.twig' with {text: 'Success Button', class: 'btn-success'} %}
        {% include 'components/button.twig' with {text: 'Danger Button', class: 'btn-danger'} %}
        {% include 'components/button.twig' with {text: 'Warning Button', class: 'btn-warning'} %}
        {% include 'components/button.twig' with {text: 'Info Button', class: 'btn-info'} %}
        {% include 'components/button.twig' with {text: 'Light Button', class: 'btn-light'} %}
        {% include 'components/button.twig' with {text: 'Dark Button', class: 'btn-dark'} %}
      </div>
    </section>

    <section class="mb-5">
      <h2 class="mb-3">Utility Classes</h2>
      <p class="text-primary">This text is primary colored.</p>
      <p class="text-secondary">This text is secondary colored.</p>
      <p class="text-success">This text is success colored.</p>
      <p class="text-danger">This text is danger colored.</p>
      <p class="text-warning">This text is warning colored.</p>
      <p class="text-info">This text is info colored.</p>
      <p class="text-light bg-dark">This text is light colored on dark background.</p>
      <p class="text-dark">This text is dark colored.</p>

      <div class="p-3 mb-3 bg-primary text-white">Background Primary</div>
      <div class="p-3 mb-3 bg-secondary text-white">Background Secondary</div>
      <div class="p-3 mb-3 bg-success text-white">Background Success</div>
      <div class="p-3 mb-3 bg-danger text-white">Background Danger</div>
      <div class="p-3 mb-3 bg-warning text-dark">Background Warning</div>
      <div class="p-3 mb-3 bg-info text-white">Background Info</div>
      <div class="p-3 mb-3 bg-light text-dark">Background Light</div>
      <div class="p-3 mb-3 bg-dark text-white">Background Dark</div>

      <p class="mt-5">Margin Top 5</p>
      <p class="pb-4">Padding Bottom 4</p>
      <p class="mx-auto d-block" style="width: 200px;">Centered Block</p>
    </section>

    <section class="mb-5">
      <h2 class="mb-3">SVG Icons</h2>
      <p>
        <svg class="icon" width="24" height="24"><use xlink:href="#clock"></use></svg>
        Clock Icon
      </p>
      <p>
        <svg class="icon" width="24" height="24"><use xlink:href="#info"></use></svg>
        Info Icon
      </p>
    </section>
{% endblock %}
