<div class="flex flex-col items-center justify-center gap-y-8 w-fit min-w-xs">
    <h1 class="text-4xl">New thread</h1>
    <div class="input rounded-lg w-full flex items-center gap-x-2 focus-within:outline focus-within:outline-2 focus-within:outline-primary bg-base-100">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" class="fill-current text-base-content">
            <path d="M80 0v-160h800V0H80Zm160-320h56l312-311-29-29-28-28-311 312v56Zm-80 80v-170l448-447q11-11 25.5-17t30.5-6q16 0 31 6t27 18l55 56q12 11 17.5 26t5.5 31q0 15-5.5 29.5T777-687L330-240H160Zm560-504-56-56 56 56ZM608-631l-29-29-28-28 57 57Z"/>
        </svg>
        <input id="threadNameInput" type="text" placeholder="Thread name..." value="{threadName}" class="flex-1 bg-transparent border-none outline-none shadow-none"/>
    </div>
    <textarea id="threadDescriptionInput" class="textarea rounded-lg" placeholder="Description..."></textarea>
    <div class="dropdown dropdown-center w-full">
        <div tabindex="0" role="button" class="btn w-full rounded-lg flex items-center justify-between">
            Message auto destruction
            <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="fill-current text-base-content">
                <path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/>
            </svg>
        </div>
        <ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box w-full z-1 w-52 p-2 shadow-sm">
            <li class="autoDeletionBtn rounded-lg" data-auto-deletion="86400000">
                <a class="rounded-lg">Every days</a>
            </li>
            <li class="autoDeletionBtn rounded-lg" data-auto-deletion="604800000">
                <a class="rounded-lg">Every weeks</a>
            </li>
            <li class="autoDeletionBtn rounded-lg" data-auto-deletion="2592000000">
                <a class="rounded-lg">Every months</a>
            </li>
        </ul>
    </div>
    <div class="w-full flex items-center justify-left gap-x-4">
        <input type="checkbox" class="toggle"/>
        <p>Urgency deletion</p>
    </div>
    <button id="createThreadBtn" class="btn w-full rounded-lg mt-16">Create</button>
</div>