@extends('layouts.main')

@section('content')

<div class="wrapper styleguide-wrapper color:bg-white">

    <h1>Colors</h1>
    <div class="styleguide-color_container">
        <div class="styleguide_color color:bg-darkgrey color:text-white">#080808</div>
        <div class="styleguide_color color:bg-red">#BA1C1C</div>
        <div class="styleguide_color color:bg-whitesilk">#F8F8F6</div>
        <div class="styleguide_color color:bg-redsatan">#A61B1B</div>
    </div>

    <h1>Typography</h1>


    <h2>Titles</h2>

    <div class="styleguide-typography-container">
        <h1>H1 — I am the ultimate header and subtitle to none </h1>
        <h2>H2 — I am the ultimate header and subtitle to none </h2>
        <h3>H3 — I am the ultimate header and subtitle to none </h3>
        <h4>H4 — I am the ultimate header and subtitle to none </h4>
    </div>

    <h2>body</h2>
    <p>Get backstage access to millions of hard rock and heavy metal fans from around the world via a broad range of
        campaign options; display, video, social, custom executions, and more.</p>

    <p>Esse officia amet ex qui <i>anim irure occaecat</i> Lorem aliquip laborum ut. Dolor <strong>laborum sint eu magna occaecat</strong> elit incididunt duis elit laboris ad. <u>Officia ad ipsum officia</u> magna laborum adipisicing excepteur voluptate nisi ad voluptate. Sit quis exercitation Lorem Lorem. Magna irure tempor et occaecat veniam aute irure cupidatat deserunt culpa ullamco quis culpa. Lorem dolor fugiat proident nulla sint nisi fugiat velit sunt sint Lorem quis. Laborum culpa enim proident esse <sup>laborum cupidatat esse</sup> exercitation aute <sub>mollit ut</sub> cupidatat.</p>

    <h2>small / meta</h2>
    <p><small>Dates, comments, ratings in feeds</small></p>

    <h2>Bold</h2>
    <p><strong>‘Bold’ text uses semibold font weight</strong></p>

    <h2>Italic</h2>
    <p><i>Italic text</i></p>

    <h2>Body Link</h2>
    <p><a href="">Linked text</a></p>

    <h1>Buttons</h1>
    <a href="" class="btn">button</a>

    <h1>Forms</h1>
    <div class="styleguide-form">
        <form class="form" action="">
            <div class="form-row">
                <label for="">What are you contacting us about</label>
                <select name="" id="">
                    <option value="">General Informations</option>
                    <option value=""></option>
                    <option value=""></option>
                </select>
            </div>

            <div class="form-row">
                <label for="">Your email</label>
                <input type="text" name="" id="" class="">
            </div>

            <div class="form-row error">
                <label for="">Your name (or nickname)</label>
                <input type="text" name="" id="" class="">
                <div class="error-message">
                    <p>You must provide your name</p>
                </div>
            </div>

            <div class="form-row">
                <label for="">Website URL (for contribution credit, if applicable)</label>
                <input type="text" name="" id="" class="">
            </div>

            <div class="form-row">
                <label for="">Your message</label>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>

            <div class="form-row">
                <button class="btn btn--primary margin__top-default" type="submit">Send</button>
            </div>
        </form>
    </div>

    <h1>Cards</h1>

    <h1>Tags</h1>

    <br>
    <span class="tag">Features</span>

    <h1>Pagination</h1>

    <h1>Filters</h1>

    <div>
        <div class="search__filters">
            <div>
                <label for="all">All</label>
                <input type="radio" id="all" name="filter" value="all" checked>

                <label for="news">News</label>
                <input type="radio" id="news" name="filter" value="news">

                <label for="features">Features</label>
                <input type="radio" id="features" name="filter" value="features">

                <label for="reviews">Reviews</label>
                <input type="radio" id="reviews" name="filter" value="reviews">
            </div>
        </div>
    </div>

    <div class="pagination">
        <a class="pagination-btn pagination-btn-disabled"
            href="#">
            <img class="margin__right-default" src="{{ asset('img/icons/icon-previous.svg') }}" alt="previous">
            Prev</a>
        <a class="btn" href="#">More Reviews</a>
        <a class="pagination-btn"
            href="#">
            Next
            <img class="margin__left-default" src="{{ asset('img/icons/icon-next.svg') }}" alt="next">
        </a>
    </div>

    <br><br>

    <div class="pagination pagination-numeric">
        <ul role="navigation">
            <li>
                <a href="#" rel="prev" aria-label="@lang('pagination.previous')">
                    <img class="margin__right-default" src="{{ asset('img/icons/icon-previous.svg') }}" alt="previous">
                    Prev
                </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>

            <li class="page-item disabled" aria-disabled="true"><span class="page-link">...</span></li>

            <li class="page-item active">
                <a class="page-link" href="#">2</a>
            </li>

            <li class="disabled">
                <a href="#" rel="prev" aria-label="@lang('pagination.next')">
                    Next
                    <img class="margin__left-default"
                        src="{{ asset('img/icons/icon-next.svg') }}" alt="next">
                </a>
            </li>
        </ul>
    </div>

    <br><br>

</div>

@endsection