Utm Generator: Collab

<section id="collabTarget" class="u-aria-hidden">
    <h1 class="u-m-b-2">Samarbeten</h1>
    <div class="row">
        <div class="grid-18 grid-sm-12 grid-lg-9">
            <h2>Steg 3: Vad är ambitionen med kampanjen?</h2>
            <div class="display-flex flex-column">
                <label for="contentCollab">Välj innehåll</label>
                <select name="contentCollab" id="contentCollab" class="a-select a-select--full-width">
                    <option value="" disabled selected>Välj innehåll</option>
                    <option value="kännedom">Kännedom</option>
                    <option value="trafik">Trafik</option>
                    <option value="video">Video</option>
                    <option value="konvertering">Konvertering</option>
                </select>
                <button data-a11y-toggle="editCollabContainer" aria-controls="editCollabContainer" aria-expanded="false" type="button" id="editCollabContainer" data-toggle-target="editCollabContainer" data-toggle-text="Redigera ambition|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
                    Redigera ambition
                </button>
            </div>
            <div id="editCollabContainer" aria-hidden="true" class="u-aria-hidden">
                <div class="row">
                    <div class="grid-18">
                        <div class="display-flex u-m-t-2">
                            <input type="text" class="a-input u-m-r-1" placeholder="Ny ambition">
                            <button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
                                <span class="a-button__text">Lägg till</span>
                                <svg class="icon a-button__icon u-icon--medium">
                                    <use xlink:href="#icon-plus"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row u-m-t-3">
                    <div class="grid-18">
                        <div class="table-container">
                            <table class="m-table m-table--tight">
                                <thead>
                                    <tr>
                                        <th>Ambition</th>
                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Kännedom</td>
                                        <td class="u-align-center">
                                            <button type="button" class="a-button a-button--standalone-icon">
                                                <span class="a-button__text">Ta bort</span>
                                                <svg class="icon a-button__icon u-icon--medium">
                                                    <use xlink:href="#icon-trash"></use>
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Trafik</td>
                                        <td class="u-align-center">
                                            <button type="button" class="a-button a-button--standalone-icon">
                                                <span class="a-button__text">Ta bort</span>
                                                <svg class="icon a-button__icon u-icon--medium">
                                                    <use xlink:href="#icon-trash"></use>
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Video</td>
                                        <td class="u-align-center">
                                            <button type="button" class="a-button a-button--standalone-icon">
                                                <span class="a-button__text">Ta bort</span>
                                                <svg class="icon a-button__icon u-icon--medium">
                                                    <use xlink:href="#icon-trash"></use>
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Konvertering</td>
                                        <td class="u-align-center">
                                            <button type="button" class="a-button a-button--standalone-icon">
                                                <span class="a-button__text">Ta bort</span>
                                                <svg class="icon a-button__icon u-icon--medium">
                                                    <use xlink:href="#icon-trash"></use>
                                                </svg>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid-18 grid-sm-12 grid-lg-9">
            <h2>Steg 4: Vad handlar innehållet om?</h2>
            <label for="campaignContentCollab">Innehåll</label>
            <input type="text" class="a-input" name="campaignContentCollab" id="campaignContentCollab" placeholder="t.ex. ''Samarbete 2024''">
        </div>
    </div>
</section>