<div class="pad-css-tool">
    <div class="pad-css-tool-head">
        <h2><pad-translate>CSS Migratie Tool</pad-translate></h2>
        <p>
            <pad-translate>Converteert CSS bestanden met oude klassen en ID's naar nieuwe klassen.</pad-translate><br>
            <pad-translate>Toont wijzigingen met <span class="pad-css-good">groene markeringen</span> en mislukte conversies met <span class="pad-css-danger">rode markeringen</span>.</pad-translate><br>
            <pad-translate>Een mislukte conversie betekent dat de tool de oude klasse niet kan omzetten en dat je dit handmatig moet controleren en converteren.</pad-translate> <br>
            <pad-translate>Beweeg met je muis over de markering om te zien waar de klasse of ID naar is gewijzigd.</pad-translate>
        </p>
    </div>

    <pad-form data-name="css-converter" novalidate>
        <div class="pad-css-converter">
            <div class="pad-css-converter-io">
                <h3><pad-translate>Invoer</pad-translate></h3>
                <div>
                    <h3><pad-translate>Resultaat</pad-translate></h3>
                    <p><span class="pad-css-good">{{pad-changed}}</span> <pad-translate>gewijzigd en</pad-translate> <span class="pad-css-danger">{{pad-errors}}</span> <pad-translate>mislukt</pad-translate></p>
                </div>
                <textarea name="{{pad-field-name}}" placeholder="css file contents">{{pad-field-value}}</textarea>
                <div class="pad-css-output">
                    {{pad-conversion}}
                </div>
            </div>
            <pad-action-button data-action="CSS Converter">
                <pad-translate>converteer</pad-translate>
            </pad-action-button>
        </div>
    </pad-form>
</div>
