<style>
    html {
        background-color: #d8d8d8;
    }
</style>
<div class="background-ash">
    <div class="wrapper u-p-y-4">
        <div class="row background-ash">
            <div class="grid-18 grid-md-12">
                <h1 class="supersize">UTM-generator</h1>
                <p class="preamble">UTM används för att märka upp våra betalda marknadsföringssatsningar. Det möjliggör att vi ser var trafiken kommer ifrån och var vi presterar bra.</p>
            </div>
            <div class="grid-18">
                <h2>Steg 1: Ange länken du vill tagga</h2>
                <div class="field-group u-z-index-foreground u-p-t-1 u-p-b-2">
                    <label for="URL" class="">URL</label>
                    <div class="display-flex">
                        <input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input a-input--large u-m-r-2" pattern="https://.*" required>
                    </div>
                </div>
                <div class="row u-m-t-2 u-m-b-4">
                    <div class="grid-18">
                        <h2>Steg 2: Välj var länken kommer att delas</h2>
                    </div>
                    <div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/meta-logo.svg" class="m-card__image m-card__media" alt="Meta logotype">
                            <div class="m-card__content u-p-x-2 u-p-y-0">
                                <div class="radio">
                                    <input type="radio" id="utm_source_meta" name="utm_source" value="utm_source_meta" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="metaTarget" aria-controls="metaTarget" aria-expanded="false">
                                    <label for="utm_source_meta" class="u-link-area u-position-static">
                                        Facebook / Instagram
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/google-ads.svg" class="m-card__image m-card__media" alt="Google Ads logotype">
                            <div class="m-card__content u-p-x-2 u-p-y-0">
                                <div class="radio">
                                    <input type="radio" id="utm_source_google_ads" name="utm_source" value="utm_source_google_ads" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="googleAdsTarget" aria-controls="googleAdsTarget" aria-expanded="false">
                                    <label for="utm_source_google_ads" class="u-link-area u-position-static">Google Ads</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/x.svg" class="m-card__image m-card__media" alt="X logotype">
                            <div class="m-card__content u-p-x-2 u-p-y-0">
                                <div class="radio">
                                    <input type="radio" id="utm_source_x" name="utm_source" value="utm_source_x" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="xTarget" aria-controls="xTarget" aria-expanded="false">
                                    <label for="utm_source_x" class="u-link-area u-position-static">X / Twitter</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/linkedin-logo.svg" class="m-card__image m-card__media" alt="LinkedIn logotype">
                            <div class="m-card__content u-p-x-2 u-p-y-0">
                                <div class="radio">
                                    <input type="radio" id="utm_source_linkedin" name="utm_source" value="utm_source_linkedin" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="linkedinTarget" aria-controls="linkedinTarget" aria-expanded="false">
                                    <label for="utm_source_linkedin" class="u-link-area u-position-static">LinkedIn</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/email.svg" class="m-card__image m-card__media" alt="E-post">
                            <div class="m-card__content u-p-x-2 u-p-y-0">
                                <div class="radio">
                                    <input type="radio" id="utm_source_email" name="utm_source" value="utm_source_email" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="emailTarget" aria-controls="emailTarget" aria-expanded="false">
                                    <label for="utm_source_email" class="u-link-area u-position-static">Nyhetsbrev</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
                        <div class="m-card m-card--padded">
                            <img src="/assets/images/link.svg" class="m-card__image m-card__media" alt="Link">
                            <div class="m-card__content u-p-x-2 u-p-y-0">
                                <div class="radio">
                                    <input type="radio" id="utm_source_collab" name="utm_source" value="utm_source_collab" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="collabTarget" aria-controls="collabTarget">
                                    <label for="utm_source_collab" class="u-link-area u-position-static">Samarbeten</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- META -->
                <section id="metaTarget" class="u-aria-hidden">
                    <h1 class="u-m-b-2">Meta</h1>
                    <h2>Steg 3: Välj vad ambitionen med kampanjen är</h2>
                    <div class="row">
                        <div class="grid-18 grid-sm-12 grid-lg-9">
                            <div class="display-flex flex-column">
                                <label for="brandMeta">Välj varumärke</label>
                                <select name="brandMeta" id="brandMeta" class="a-select a-select--full-width">
                                    <option value="" disabled selected>Välj varumärke</option>
                                    <option value="INTS">Internetstiftelsen (INTS)</option>
                                    <option value="INK">Internetkunskap (INK)</option>
                                    <option value="IND">Internetdagarna (IND)</option>
                                    <option value="IMUS">Internetmuseum (IMUS)</option>
                                    <option value="G10">Goto 10 (G10)</option>
                                    <option value="SOI">Svenskarna & internet (SOI)</option>
                                </select>
                                <button data-a11y-toggle="editBrandsMetaContainer" aria-controls="editBrandsMetaContainer" aria-expanded="false" type="button" id="editBrandsMeta" data-toggle-text="Redigera varumärken|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 varumärken
                                </button>
                            </div>
                            <div id="editBrandsMetaContainer" 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="Nytt varumärke">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
                                            <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>Varumärke</th>
                                                        <th>Värde</th>
                                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Internetstiftelsen</td>
                                                        <td>INTS</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>Internetkunskap</td>
                                                        <td>INK</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>Internetdagarna</td>
                                                        <td>IND</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>Internetmuseum</td>
                                                        <td>IMUS</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>Goto 10</td>
                                                        <td>G10</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>Svenskarna & internet</td>
                                                        <td>SOI</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">
                            <div class="display-flex flex-column">
                                <label for="campaignMeta">Kampanjnamn</label>
                                <select name="campaignMeta" id="campaignMeta" class="a-select a-select--full-width">
                                    <option value="" disabled selected>Välj kampanjnamn</option>
                                    <option value="INTS">Tänk säkert</option>
                                    <option value="INK">Internetkunskap säkerhetsmånaden</option>
                                    <option value="IND">Internetdagarna 2024</option>
                                    <option value="IMUS">Internetmuseum</option>
                                    <option value="G10">Goto 10</option>
                                    <option value="SOI">Svenskarna & internet 2024</option>
                                </select>
                                <button data-a11y-toggle="editCampaignMetaContainer" aria-controls="editCampaignMetaContainer" aria-expanded="false" type="button" id="editCampaignMeta" data-toggle-text="Redigera kampanjer|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 kampanjer
                                </button>
                            </div>
                            <div id="editCampaignMetaContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
                                <div class="row">
                                    <div class="grid-18">
                                        <div class="display-flex">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Ny kampanj">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
                                            <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>Kampanj</th>
                                                        <th>Värde</th>
                                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Tänk säkert</td>
                                                        <td>INTS</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>Internetkunskap säkerhetsmånaden</td>
                                                        <td>INK</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>Internetdagarna 2024</td>
                                                        <td>IMD</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>Internetmuseum</td>
                                                        <td>IMUS</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>Goto 10</td>
                                                        <td>G10</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>Svenskarna & internet 2024</td>
                                                        <td>SOI</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>
                </section>

                <!-- GOOGLE -->
                <section id="googleAdsTarget" class="u-aria-hidden">
                    <h1 class="u-m-b-2">Google Ads</h1>
                    <h2>Steg 3: Välj vad ambitionen med kampanjen är</h2>
                    <div class="row">
                        <div class="grid-18 grid-sm-12 grid-lg-9">
                            <div class="display-flex flex-column">
                                <label for="brandGoogleAds">Välj varumärke</label>
                                <select name="brandGoogleAds" id="brandGoogleAds" class="a-select a-select--full-width">
                                    <option value="" disabled selected>Välj varumärke</option>
                                    <option value="INTS">Internetstiftelsen</option>
                                    <option value="INK">Internetkunskap</option>
                                    <option value="IND">Internetdagarna</option>
                                    <option value="IMUS">Internetmuseum</option>
                                    <option value="G10">Goto 10</option>
                                    <option value="SOI">Svenskarna & internet</option>
                                </select>
                                <button data-a11y-toggle="editBrandGoogleAdsContainer" aria-controls="editBrandGoogleAdsContainer" aria-expanded="false" type="button" id="editBrandGoogleAds" data-toggle-text="Redigera varumärken|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 varumärken
                                </button>
                            </div>
                            <div id="editBrandGoogleAdsContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
                                <div class="row">
                                    <div class="grid-18">
                                        <div class="display-flex">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Nytt varumärke">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
                                            <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>Varumärke</th>
                                                        <th>Värde</th>
                                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Internetstiftelsen</td>
                                                        <td>INTS</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>Internetkunskap</td>
                                                        <td>INK</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>Internetdagarna</td>
                                                        <td>IND</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>Internetmuseum</td>
                                                        <td>IMUS</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>Goto 10</td>
                                                        <td>G10</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>Svenskarna & internet</td>
                                                        <td>SOI</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">
                            <div class="display-flex flex-column">
                                <label for="campaignGoogleAds">Kampanjnamn</label>
                                <select name="campaignGoogleAds" id="campaignGoogleAds" class="a-select a-select--full-width">
                                    <option value="" disabled selected>Välj kampanjnamn</option>
                                    <option value="INTS">Tänk säkert</option>
                                    <option value="INK">Internetkunskap säkerhetsmånaden</option>
                                    <option value="IND">Internetdagarna 2024</option>
                                    <option value="IMUS">Internetmuseum</option>
                                    <option value="G10">Goto 10</option>
                                    <option value="SOI">Svenskarna & internet 2024</option>
                                </select>
                                <button data-a11y-toggle="editCampaignGoogleAdsContainer" aria-controls="editCampaignGoogleAdsContainer" aria-expanded="false" type="button" id="editCampaignGoogleAds" data-toggle-text="Redigera kampanjer|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 kampanjer
                                </button>
                            </div>
                            <div id="editCampaignGoogleAdsContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
                                <div class="row">
                                    <div class="grid-18">
                                        <div class="display-flex">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Ny kampanj">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
                                            <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>Kampanj</th>
                                                        <th>Värde</th>
                                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Tänk säkert</td>
                                                        <td>INTS</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>Internetkunskap säkerhetsmånaden</td>
                                                        <td>INK</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>Internetdagarna 2024</td>
                                                        <td>IND</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>Internetmuseum</td>
                                                        <td>IMUS</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>Goto 10</td>
                                                        <td>G10</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>Svenskarna & internet 2024</td>
                                                        <td>SOI</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>
                    <div class="row u-m-t-4">
                        <div class="grid-18 grid-sm-12 grid-lg-9">
                            <h2>Steg 4: Ange vad kampanjen innehåller</h2>
                            <label for="campaignContentGoogleAds">Fritext</label>
                            <input type="text" class="a-input" name="campaignContentGoogleAds" id="campaignContentGoogleAds" placeholder="t.ex. ''INK_ai_artiklar''">
                        </div>
                    </div>
                </section>

                <!-- X -->
                <section id="xTarget" class="u-aria-hidden">
                    <h1 class="u-m-b-2">X / Twitter</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="contentX">Välj innehåll</label>
                                <select name="contentX" id="contentX" 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="editXContainer" aria-controls="editXContainer" aria-expanded="false" type="button" id="editXContainer" data-toggle-target="editXContainer" 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="editXContainer" 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="campaignContentX">Innehåll</label>
                            <input type="text" class="a-input" name="campaignContentX" id="campaignContentX" placeholder="t.ex. ''X-kampanj 2024''">
                            <div class="input-help">
                                Skriv in samma namn på kampanjen som den är döpt till i X campaign manage
                            </div>
                        </div>
                    </div>
                </section>

                <!-- LINKEDIN -->
                <section id="linkedinTarget" class="u-aria-hidden">
                    <h1 class="u-m-b-2">LinkedIn</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="contentLinkedin">Välj innehåll</label>
                                <select name="contentLinkedin" id="contentLinkedin" 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="editLinkedinContainer" aria-controls="editLinkedinContainer" aria-expanded="false" type="button" id="editLinkedinContainer" data-toggle-target="editLinkedinContainer" 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="editLinkedinContainer" 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="campaignContentLinkedIn">Innehåll</label>
                            <input type="text" class="a-input" name="campaignContentLinkedIn" id="campaignContentLinkedIn" placeholder="t.ex. ''LinkedIn-kampanj 2024''">
                            <div class="input-help">
                                Skriv in samma namn på kampanjen som den är döpt till i Linkedin campaign manage
                            </div>
                        </div>
                    </div>
                </section>

                <!-- EMAIL -->
                <section id="emailTarget" class="u-aria-hidden">
                    <h1 class="u-m-b-2">Nyhetsbrev</h1>
                    <h2>Steg 3: Välj vilket nyhetsbrev</h2>
                    <div class="row">
                        <div class="grid-18 grid-sm-12 grid-lg-9">
                            <div class="display-flex flex-column">
                                <label for="brandEmail">Välj nyhetsbrev</label>
                                <select name="brandEmail" id="brandEmail" class="a-select a-select--full-width">
                                    <option value="" disabled selected>Välj nyhetsbrev</option>
                                    <option value="internetstiftelsens almänna nyhetsbrev">Internetstiftelsens allmänna nyhetsbrev</option>
                                    <option value="digitala lektioners nyhetsbrev">Digitala lektioner</option>
                                    <option value="internetkunskaps nyhetbrev">Internetkunskap</option>
                                    <option value="internetdagarnas kunder">Internetdagarnas kunder</option>
                                    <option value="internetdagarnas intresselista">Internetdagarnas intresselista</option>
                                    <option value="svenskarna och internets intresselista">Svenskarna och internets intresselista</option>
                                </select>
                                <button data-a11y-toggle="editEmailsContainer" aria-controls="editEmailsContainer" aria-expanded="false" type="button" id="editEmailsContainer" data-toggle-target="editEmailsContainer" data-toggle-text="Redigera nyhetsbrev|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 nyhetsbrev
                                </button>
                            </div>
                            <div id="editEmailsContainer" 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="Nytt nyhetsbrev">
                                            <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>Nyhetsbrev</th>
                                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Internetstiftelsen</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>Internetkunskap</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>Internetdagarna</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>Internetmuseum</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>Goto 10</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>Svenskarna & internet</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">
                            <div class="display-flex flex-column">
                                <label for="campaignEmail">Kampanjnamn</label>
                                <select name="campaignEmail" id="campaignEmail" class="a-select a-select--full-width">
                                    <option value="" disabled selected>Välj kampanjnamn</option>
                                    <option value="INTS">Tänk säkert</option>
                                    <option value="INK">Internetkunskap säkerhetsmånaden</option>
                                    <option value="IND">Internetdagarna 2024</option>
                                    <option value="IMUS">Internetmuseum</option>
                                    <option value="G10">Goto 10</option>
                                    <option value="SOI">Svenskarna & internet 2024</option>
                                </select>
                                <button data-a11y-toggle="editCampaignEmailContainer" aria-controls="editCampaignEmailContainer" aria-expanded="false" type="button" id="editCampaignEmailContainer" data-toggle-target="editCampaignEmailContainer" data-toggle-text="Redigera kampanjer|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 kampanjer
                                </button>
                            </div>
                            <div id="editCampaignEmailContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
                                <div class="row">
                                    <div class="grid-18">
                                        <div class="display-flex">
                                            <input type="text" class="a-input u-m-r-1" placeholder="Ny kampanj">
                                            <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>Kampanj</th>
                                                        <th class="u-align-center" style="width:110px;">Ta bort</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Tänk säkert</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>Internetkunskap säkerhetsmånaden</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>Internetdagarna 2024</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>Internetmuseum</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>Goto 10</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>Svenskarna & internet 2024</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>
                    <div class="row u-m-t-4">
                        <div class="grid-18 grid-sm-12 grid-lg-9">
                            <h2>Steg 4: Vad handlar innehållet om?</h2>
                            <label for="campaignContentEmail">Innehåll</label>
                            <input type="text" class="a-input" name="campaignContentEmail" id="campaignContentEmail" placeholder="t.ex. ''Tidigare kunder''">
                            <div class="input-help">
                                Beskriv kortfattat målgruppen du skickar mejlet till. T.ex. “Tidigare kunder"
                            </div>
                        </div>
                    </div>
                </section>

                <!-- COLLABORATION -->
                <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>

            </div>
        </div>
    </div>
</div>
<div class="row u-p-y-2 background-concrete">
    <div class="grid-18">
        <div class="wrapper">
            <div class="field-group u-position-sticky-top-0 u-z-index-foreground u-p-t-1 u-p-b-2">
                <label for="URL" class="">Kampanj URL</label>
                <div class="display-flex">
                    <input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input u-m-r-2" pattern="https://.*" required readonly>
                    <button type="button" class="a-button u-flex-shrink-0">
                        <span class="a-button__text">Kopiera länk</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
	html {
		background-color: #d8d8d8;
	}
</style>
<div class="background-ash">
	<div class="wrapper u-p-y-4">
		<div class="row background-ash">
			<div class="grid-18 grid-md-12">
				<h1 class="supersize">UTM-generator</h1>
				<p class="preamble">UTM används för att märka upp våra betalda marknadsföringssatsningar. Det möjliggör att vi ser var trafiken kommer ifrån och var vi presterar bra.</p>
			</div>
			<div class="grid-18">
				<h2>Steg 1: Ange länken du vill tagga</h2>
				<div class="field-group u-z-index-foreground u-p-t-1 u-p-b-2">
					<label for="URL" class="{{labelClasses}}">URL</label>
					<div class="display-flex">
						<input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input a-input--large u-m-r-2" pattern="https://.*" required>
					</div>
				</div>
				<div class="row u-m-t-2 u-m-b-4">
					<div class="grid-18">
						<h2>Steg 2: Välj var länken kommer att delas</h2>
					</div>
					<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
						<div class="m-card m-card--padded">
							<img src="/assets/images/meta-logo.svg" class="m-card__image m-card__media" alt="Meta logotype">
							<div class="m-card__content u-p-x-2 u-p-y-0">
								<div class="radio">
									<input type="radio" id="utm_source_meta" name="utm_source" value="utm_source_meta" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="metaTarget" aria-controls="metaTarget" aria-expanded="false">
									<label for="utm_source_meta" class="u-link-area u-position-static">
										Facebook / Instagram
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
						<div class="m-card m-card--padded">
							<img src="/assets/images/google-ads.svg" class="m-card__image m-card__media" alt="Google Ads logotype">
							<div class="m-card__content u-p-x-2 u-p-y-0">
								<div class="radio">
									<input type="radio" id="utm_source_google_ads" name="utm_source" value="utm_source_google_ads" class="a-radio u-visuallyhidden"  data-toggle="radio" data-target="googleAdsTarget" aria-controls="googleAdsTarget" aria-expanded="false">
									<label for="utm_source_google_ads" class="u-link-area u-position-static">Google Ads</label>
								</div>
							</div>
						</div>
					</div>
					<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
						<div class="m-card m-card--padded">
							<img src="/assets/images/x.svg" class="m-card__image m-card__media" alt="X logotype">
							<div class="m-card__content u-p-x-2 u-p-y-0">
								<div class="radio">
									<input type="radio" id="utm_source_x" name="utm_source" value="utm_source_x" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="xTarget" aria-controls="xTarget" aria-expanded="false">
									<label for="utm_source_x" class="u-link-area u-position-static">X / Twitter</label>
								</div>
							</div>
						</div>
					</div>
					<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
						<div class="m-card m-card--padded">
							<img src="/assets/images/linkedin-logo.svg" class="m-card__image m-card__media" alt="LinkedIn logotype">
							<div class="m-card__content u-p-x-2 u-p-y-0">
								<div class="radio">
									<input type="radio" id="utm_source_linkedin" name="utm_source" value="utm_source_linkedin" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="linkedinTarget" aria-controls="linkedinTarget" aria-expanded="false">
									<label for="utm_source_linkedin" class="u-link-area u-position-static">LinkedIn</label>
								</div>
							</div>
						</div>
					</div>
					<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
						<div class="m-card m-card--padded">
							<img src="/assets/images/email.svg" class="m-card__image m-card__media" alt="E-post">
							<div class="m-card__content u-p-x-2 u-p-y-0">
								<div class="radio">
									<input type="radio" id="utm_source_email" name="utm_source" value="utm_source_email" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="emailTarget" aria-controls="emailTarget" aria-expanded="false">
									<label for="utm_source_email" class="u-link-area u-position-static">Nyhetsbrev</label>
								</div>
							</div>
						</div>
					</div>
					<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
						<div class="m-card m-card--padded">
							<img src="/assets/images/link.svg" class="m-card__image m-card__media" alt="Link">
							<div class="m-card__content u-p-x-2 u-p-y-0">
								<div class="radio">
									<input type="radio" id="utm_source_collab" name="utm_source" value="utm_source_collab" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="collabTarget" aria-controls="collabTarget">
									<label for="utm_source_collab" class="u-link-area u-position-static">Samarbeten</label>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- META -->
				{{render '@utm-generator--meta'}}

				<!-- GOOGLE -->
				{{render '@utm-generator--google'}}

				<!-- X -->
				{{render '@utm-generator--x'}}

				<!-- LINKEDIN -->
				{{render '@utm-generator--linkedin'}}

				<!-- EMAIL -->
				{{render '@utm-generator--email'}}

				<!-- COLLABORATION -->
				{{render '@utm-generator--collab'}}
			</div>
		</div>
	</div>
</div>
<div class="row u-p-y-2 background-concrete">
	<div class="grid-18">
		<div class="wrapper">
			<div class="field-group u-position-sticky-top-0 u-z-index-foreground u-p-t-1 u-p-b-2">
				<label for="URL" class="{{labelClasses}}">Kampanj URL</label>
				<div class="display-flex">
					<input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input u-m-r-2" pattern="https://.*" required readonly>
					<button type="button" class="a-button u-flex-shrink-0">
						<span class="a-button__text">Kopiera länk</span>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
/* No context defined. */

No notes defined.