@extends('backend.master')

@section('title')
    {{ ___('common.Alert') }}
@endsection
@section('content')
    <div class="page-content">

        {{-- bradecrumb Area S t a r t --}}
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                    <h4 class="bradecrumb-title mb-1">{{ ___('common.alert') }}</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                            <li class="breadcrumb-item">{{ ___('common.alert') }}</li>
                        </ol>
                </div>
                <div class="col-sm-6">
                    <!-- Bookmark Start-->
                    <div class="bookmark">
                        <ul>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-inbox">
                                        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
                                        <path
                                            d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z">
                                        </path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-message-square">
                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-command">
                                        <path
                                            d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z">
                                        </path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-layers">
                                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                                        <polyline points="2 17 12 22 22 17"></polyline>
                                        <polyline points="2 12 12 17 22 12"></polyline>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-star bookmark-search">
                                        <polygon
                                            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                                        </polygon>
                                    </svg></a></li>
                        </ul>
                    </div>
                    <!-- Bookmark Ends-->
                </div>
            </div>
        </div>
        {{-- bradecrumb Area E n d --}}

        <div class="row">
            <div class="col-lg-6">
                <div class="card ot-card mb-24">
                    <div class="card-header">
                        <h3>{{ ___('common.basic_alert') }}</h3>
                        <p>The simplest usage for short messages.</p>
                    </div>
                    <div class="card-body mb-24">
                        <div class="alert alert-primary" role="alert">
                            This is a primary alert—check it out!
                        </div>
                        <div class="alert alert-secondary" role="alert">
                            This is a secondary alert—check it out!
                        </div>
                        <div class="alert alert-success" role="alert">
                            This is a success alert—check it out!
                        </div>
                        <div class="alert alert-danger" role="alert">
                            This is a danger alert—check it out!
                        </div>
                        <div class="alert alert-warning" role="alert">
                            This is a warning alert—check it out!
                        </div>
                        <div class="alert alert-info" role="alert">
                            This is a info alert—check it out!
                        </div>

                        <div class="alert alert-dark" role="alert">
                            This is a dark alert—check it out!
                        </div>
                    </div>

                    {{--  --}}
                    <div class="card-header">
                        <h3>{{ ___('common.icon_alert') }}</h3>
                        <p>The simplest usage for short messages with Icon.</p>
                    </div>
                    <div class="card-body">
                        <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                            <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
                                <path
                                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
                            </symbol>
                            <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </symbol>
                            <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
                                <path
                                    d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h33.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                            </symbol>
                        </svg>

                        <div class="alert basic-success-alert d-flex align-items-center" role="alert">
                            <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img"
                                aria-label="Info:">
                                <use xlink:href="#check-circle-fill" />
                            </svg>
                            <div>An example alert with an icon</div>
                        </div>
                        <div class="alert basic-secondary-alert d-flex align-items-center" role="alert">
                            <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img"
                                aria-label="Success:">
                                <use xlink:href="#info-fill" />
                            </svg>
                            <div>An example success alert with an icon</div>
                        </div>
                        <div class="alert basic-warning-alert d-flex align-items-center" role="alert">
                            <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img"
                                aria-label="Warning:">
                                <use xlink:href="#exclamation-triangle-fill" />
                            </svg>
                            <div>An example warning alert with an icon</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card ot-card mb-24">
                    <div class="card-header">
                        <h3>{{ ___('common.describe_alert') }}</h3>
                        <p>The simplest usage for short messages with describe.</p>
                    </div>
                    <div class="card-body mb-24">
                        <div class="alert alert-success-describe basic-success-alert" role="alert">
                            <h4 class="alert-heading">Well done!</h4>
                            <p>
                                Aww yeah, you successfully read this important alert message.
                            </p>
                            <hr />
                            <p class="mb-0">
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate illo numquam
                                necessitatibus, fuga doloremque beatae veniam a accusantium eligendi eveniet aut pariatur!
                                Tempore neque perspiciatis a fugiat officia recusandae explicabo!
                            </p>
                        </div>
                        <div class="alert alert-secondary-describe basic-secondary-alert" role="alert">
                            <h4 class="alert-heading">Well done!</h4>
                            <p>
                                Aww yeah, you successfully read this important alert message.
                            </p>
                            <hr />
                            <p class="mb-0">
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate illo numquam
                                necessitatibus, fuga doloremque beatae veniam a accusantium eligendi eveniet aut pariatur!
                                Tempore neque perspiciatis a fugiat officia recusandae explicabo!
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate illo numquam
                                necessitatibus,
                            </p>
                        </div>

                    </div>

                    {{-- Closable Alert  --}}
                    <div class="card-header">
                        <h3>{{ ___('common.closable_alert') }}</h3>
                        <p>The simplest usage for short messages with close button.</p>
                    </div>
                    <div class="card-body">
                        <div class="alert basic-success-alert alert-dismissible fade show" role="alert">
                            A simple close success alert—check it out!
                            <button class="close-icon success-icon badge-light-success" data-bs-dismiss="alert"
                                aria-label="Close"><span>X</span></button>
                        </div>
                        <div class="alert basic-secondary-alert alert-dismissible fade show" role="alert">
                            A simple close secondary alert—check it out!
                            <button class="close-icon secondary-icon badge-light-primary" data-bs-dismiss="alert"
                                aria-label="Close"><span>X</span></button>
                        </div>
                        <div class="alert basic-warning-alert alert-dismissible fade show" role="alert">
                            A simple close warning alert—check it out!
                            <button class="close-icon warning-icon badge-light-warning" data-bs-dismiss="alert"
                                aria-label="Close"><span>X</span></button>
                        </div>
                        <div class="alert basic-danger-alert alert-dismissible fade show" role="alert">
                            A simple close danger alert—check it out!
                            <button class="close-icon danger-icon badge-light-danger" data-bs-dismiss="alert"
                                aria-label="Close"><span>X</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection