@extends('admin.layout.master')
@section('content')
<div class='bg-white p-2 rounded m-2'>
    <div class="row   justify-content-between p-3 rounded m-2  bg-light">
        <div class="col-12 col-md-6 align-self-center">
            <a class='text-decoration-none fw-bold  text-dark breadc' href="">
                Email Hosts
            </a>
        </div>
        <div class="col-8 col-md-6 align-self-center float-end ">
            <div class='align-self-center  text-center justify-content-center'>
            <div class="row">
                <div class="col-4">
                </div>
                <div class="col-6">
                <div class="">
                   <select id=" Select" class="form-select rounded-pill">
                        <option>All</option>
                        <option> 1</option>
                        <option>2</option>
                    </select>
                    </div>
                </div>
                <div class="col-2 ">
                  <a class='text-decoration-none ' href="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 55 55">
                        <g id="Group_12506" data-name="Group 12506" transform="translate(-1134.648 -427.545)">
                        <ellipse id="Ellipse_593" data-name="Ellipse 593" cx="27.5" cy="27.5" rx="27.5" ry="27.5" transform="translate(1134.648 427.545)" fill="#f56a20"/>
                        <path id="Path_15415" data-name="Path 15415" d="M1.438-6.844V-9.469H8.25v-6.859h2.672v6.859h6.813v2.625H10.922V0H8.25V-6.844Z" transform="translate(1153.017 463.249)" fill="#fff"/>
                        </g>
                        </svg>
                    </a>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class='table-responsive'>
        <table class='table table-sm table-border'>
            <thead>
                <tr class='tex-g'>
                    <th>#</th>
                    <th>Name</th>
                    <th>Host</th>
                    <th>Username</th>
                    <th>Default</th>
                    <th class='text-end'>Actions</th>
                </tr>
            </thead>
            <tbody>
                @for($i=0; $i < 7 ; $i++)
                <tr>
                    <td class='align-middle'>01</td>
                    <td class='align-middle fw-bold '>
                         <span>Zoho Webmail</span>
                    </td>
                    <td class='align-middle'>
                        <p>
                        abc.zoho.com
                        </p>
                    </td>
                    <td class='align-middle'>
                        <span>example@gmail.com</span>
                    </td>
                    <td class='align-middle'>    
                        <div>
                            <label class="switch">
                            <input type="checkbox" id="togBtn">
                            <div class="slider round">
                            <!--ADDED HTML -->
                            <span class="on">ON</span>
                            <span class="off">OFF</span>
                        </div>     
                    </td>
                    <td class='text-end align-middle p-2 edit_M'>
                        <span class='px-2'>
                            <a class='text-decoration-none px-1' href="#"> 
                                <span class="edit_icon">
                                <i class="bi bi-pen"></i>
                                </span>
                                <span class='px-1'>Edit</span>
                            </a>
                        </span>
                        <span>
                            <a class='text-decoration-none px-1' href="">
                                <span class="delete_icon fw-bold"><i class="bi bi-backspace"></i></span>
                                 <span class='px-1 tcancel'>Delete</span>
                            </a>
                        </span>
                    </td>
                </tr> 
                @endfor
            </tbody>
        </table>
    </div>
</div>
@endsection