<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Job Posting</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .Existing_client {
            body {
                font-family: Arial, sans-serif;\
                width:200%;
            }
            label.required::after {
                content: "*";
                color: black;
                margin-left: 5px;
            }
            .form-group {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 20px;
            }
            .form-group label {
                margin-right: 1px;
                width: 150px;
            }
            .form-group select,
            .form-group input {
                flex: 1;
            }
            ul {
                list-style-type: none;
                padding: 0;
                margin-bottom: 20px;
                margin-left: 300px;
            }
            li {
                float: left;
                margin-bottom: 20px;
                margin-left: -10px;
            }
            li a {
                display: block;
                color: black;
                text-align: center;
                padding: 1px;
                text-decoration: underline;
                margin-top: 20px;
                margin-left: 60px;
            }
            a:hover {
                color: red;
            }
            .container {
                width:85%; /* Adjusted width */
                padding: 20px;
                border-radius: 10px;
                margin-left: 250px; /* Adjusted margin */
            }
            .form-group button {
                margin-left: auto;
                margin-top: 10px;
                display: block;
            }
            table {
                width: 67%; /* Adjusted width */
                border-collapse: collapse;
                margin-bottom: 50px;
                margin-left: 250px;
                margin-top: 30px;
                font-size:13px;
                height:10px;


                }


            th, td {
                border: 1px solid #000000;
                padding: 8px;
                text-align: left;
                color: white;
                text-align: center;
                border-left: red;

            }
            th {
                background-color: #336699;
            }
            td {
                color: #000000;
                background-color: white;
            }
            .add-button {
                margin-top: 20px;
                text-align: right;
                margin-right: 270px;
            }

            .add a {
                text-decoration: none;
            }
            .add p {
                margin-left: 1180px;
                margin-top: 3px;
            }
            .add span {
                display: inline-block;
                width: 25px;
                height: 25px;
                border: 2px solid black; /* Add border property */
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
                margin-left: 1200px;
                color: black;
            }
            #teamDetailsList{
             display: none;
        }
       .disabled-button {
            background-color: gray;
            color: white;
            cursor: not-allowed;
        }

        .enabled-button {
            background-color: #77C3EC;
            color: white;
            cursor: pointer;
        }
         .search-container1 {
            position: relative;
            display: inline-block;
            margin-left: 20px;
        }

        .search-container1 input[type="text"] {
            height: 30px;
            padding-right: 30px; /* Make space for the icon */
        }

        .search-container1 button {
            position: absolute;
            right: 0;
            top: -8px;
            height: 100%;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0 10px;
            color: #777;
        }

        .search-container1 button:hover {
            color: black;
        }

    </style>
</head>
<body>
       <div class="Existing_client">
        <form id="Existing_client" autocomplete="off">
            <div class="container">
                <div class="form-group" style="width:80%; margin-left:0px;">
                    {% csrf_token %}
                    <label for="ClientDropdown" class="required">Client:</label>
                    <select id="ClientDropdown" name="Client" required style="margin-left: -80px; height: 30px; width: 200px; overflow-wrap: break-word; white-space: normal; " tabindex="1">
                        <option value="">Select Client</option>
                        {% for client in clients %}
                            <option value="{{ client.parent_company }}">{{ client.parent_company }}</option>
                        {% endfor %}
                    </select>

                    <label for="SubClientDropdown" style="margin-left:10px" >Sub Client:</label>
                    <select id="SubClientDropdown" name="SubClient" required style="margin-left: -70px;  height: 30px; width: 200px; overflow-wrap: break-word; white-space: normal;" tabindex="2">
                        <option value="">Select Sub Client</option>

                    </select>

                    <button id="getCompanyDetailsButton" type="button" class="disabled-button" disabled style="margin-left: 10px; margin-top: 0px; height: 30px;" tabindex="3">Get Client Details</button>
                    <button id="getTeamDetailsButton" type="button" class="disabled-button" disabled style="margin-left: 10px; margin-top: 0px; height: 30px;" tabindex="4">Get Team Details</button> <br> <br> <br>
                     <div class="search-container1">
                    <input type="text" id="searchKeyword" placeholder="Search.." name="search2" tabindex="5">
                    <button type="button" id="searchButton"><i class="fa fa-search"></i></button>
                </div>
                </div>
                <div id="TableContainer" style="margin-left:-370px; width:148%;"></div>

                <div id="contactContainerId" style="margin-left:-370px; width:148%;"></div>
</div>
        </form>
    </div>
</body>
</html>

