{% extends "picata/article.html" %}
{% load wagtailimages_tags %}


{% block title %}Theme gallery{% endblock %}

{% block article %}
    <img src="{% if settings.picata.SocialSettings.default_social_image %}{% image_url settings.picata.SocialSettings.default_social_image 'fill-1200x630' %}{% endif %}" width="1200" height="630" />
    <div class="mx-8 my-8">
      <div class="grid grid-cols-2 gap-2 md:grid-cols-4">
        <button class="btn">Default</button>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <button class="btn btn-accent">Accent</button>
        <button class="btn btn-info">Info</button>
        <button class="btn btn-success">Success</button>
        <button class="btn btn-warning">Warning</button>
        <button class="btn btn-error">Error</button>
      </div>
      <div class="grid grid-cols-2 place-items-center gap-2 md:grid-cols-4 my-8">
        <span class="badge">Default</span>
        <span class="badge badge-primary">Primary</span>
        <span class="badge badge-secondary">Secondary</span>
        <span class="badge badge-accent">Accent</span>
        <span class="badge badge-info">Info</span>
        <span class="badge badge-success">Success</span>
        <span class="badge badge-warning">Warning</span>
        <span class="badge badge-error">Error</span>
      </div>
      <div class="flex flex-col gap-3 my-8">
        <div class="flex flex-col gap-3 md:flex-row">
          <div class="md:w-1/2">
            <div class="tabs tabs-lifted">
              <button class="tab">Tab</button>
              <button class="tab tab-active">Tab</button>
              <button class="tab">Tab</button>
            </div>
            <div class="flex flex-col">
              <span class="link">I'm a simple link</span>
              <span class="link link-primary">I'm a simple link</span>
              <span class="link link-secondary">I'm a simple link</span>
              <span class="link link-accent">I'm a simple link</span>
            </div>
          </div>
          <div class="flex flex-col gap-3 md:w-1/2">
            <progress value="20" max="100" class="progress">Default</progress>
            <progress value="25" max="100" class="progress progress-primary">Primary</progress>
            <progress value="30" max="100" class="progress progress-secondary">Secondary</progress>
            <progress value="40" max="100" class="progress progress-accent">Accent</progress>
            <progress value="45" max="100" class="progress progress-info">Info</progress>
            <progress value="55" max="100" class="progress progress-success">Success</progress>
            <progress value="70" max="100" class="progress progress-warning">Warning</progress>
            <progress value="90" max="100" class="progress progress-error">Error</progress>
          </div>
        </div>
        <div class="flex flex-col gap-3 md:flex-row">
          <div class="stats bg-base-300 border-base-300 border md:w-1/2">
            <div class="stat">
              <div class="stat-title">Total Page Views</div>
              <div class="stat-value">89,400</div>
              <div class="stat-desc">21% more than last month</div>
            </div>
          </div>
          <div class="flex flex-wrap items-center justify-center gap-3 md:w-1/2">
            <div class="radial-progress" style="--value:60;--size:3.5rem">60%</div>
            <div class="radial-progress" style="--value:75;--size:3.5rem">75%</div>
            <div class="radial-progress" style="--value:90;--size:3.5rem">90%</div>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-3">
        <div class="flex flex-col gap-3 md:flex-row">
          <div class="md:w-1/2">
            <div>
              <input type="checkbox" class="toggle" checked="checked" />
              <input type="checkbox" class="toggle toggle-primary" checked="checked" />
              <input type="checkbox" class="toggle toggle-secondary" checked="checked" />
              <input type="checkbox" class="toggle toggle-accent" checked="checked" />
            </div>
            <div>
              <input type="checkbox" class="checkbox" checked="checked" />
              <input type="checkbox" class="checkbox checkbox-primary" checked="checked" />
              <input type="checkbox" class="checkbox checkbox-secondary" checked="checked" />
              <input type="checkbox" class="checkbox checkbox-accent" checked="checked" />
            </div>
            <div>
              <input type="radio" name="radio-1" class="radio" checked="checked" />
              <input type="radio" name="radio-1" class="radio radio-primary" />
              <input type="radio" name="radio-1" class="radio radio-secondary" />
              <input type="radio" name="radio-1" class="radio radio-accent" />
            </div>
          </div>
          <div class="md:w-1/2">
            <input type="range" min="0" max="100" value="90" class="range range-xs" />
            <input type="range" min="0" max="100" value="70" class="range range-xs range-primary" />
            <input type="range" min="0" max="100" value="50" class="range range-xs range-secondary" />
            <input type="range" min="0" max="100" value="40" class="range range-xs range-accent" />
          </div>
        </div>
        <div class="flex flex-col gap-3 md:flex-row">
          <div class="flex flex-col gap-3 md:w-1/2">
            <input type="text" placeholder="Default" class="input input-bordered w-full" />
            <input type="text" placeholder="Primary" class="input input-primary input-bordered w-full" />
            <input type="text" placeholder="Secondary" class="input input-secondary input-bordered w-full" />
            <input type="text" placeholder="Accent" class="input input-accent input-bordered w-full" />
          </div>
          <div class="flex flex-col gap-3 md:w-1/2">
            <input type="text" placeholder="Info" class="input input-info input-bordered w-full" />
            <input type="text" placeholder="Success" class="input input-success input-bordered w-full" />
            <input type="text" placeholder="Warning" class="input input-warning input-bordered w-full" />
            <input type="text" placeholder="Error" class="input input-error input-bordered w-full" />
          </div>
        </div>
      </div>
        <!-- Cards -->
  <section>
    <h2 class="text-2xl font-semibold">Cards</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="card bg-primary text-primary-content">
        <div class="card-body">
          <h3 class="card-title">Primary Card</h3>
          <p>This is a card using the primary color.</p>
        </div>
      </div>
      <div class="card bg-secondary text-secondary-content">
        <div class="card-body">
          <h3 class="card-title">Secondary Card</h3>
          <p>This is a card using the secondary color.</p>
        </div>
      </div>
      <div class="card bg-accent text-accent-content">
        <div class="card-body">
          <h3 class="card-title">Accent Card</h3>
          <p>This is a card using the accent color.</p>
        </div>
      </div>
      <div class="card bg-neutral text-neutral-content">
        <div class="card-body">
          <h3 class="card-title">Neutral Card</h3>
          <p>This is a card using the neutral color.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Typography -->
  <section>
    <h2 class="text-2xl font-semibold">Typography</h2>
    <p class="text-lg">This is a normal paragraph.</p>
    <p class="text-lg font-semibold">This is a bold paragraph.</p>
    <p class="text-lg text-primary">This is a paragraph in primary color.</p>
    <p class="text-lg text-secondary">This is a paragraph in secondary color.</p>
    <p class="text-lg text-accent">This is a paragraph in accent color.</p>
  </section>
    </div>


{% endblock %}
