<div class="alert alert-danger" role="alert">
    <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
    <p>
        Der Shortcode <code>[tspv2_swiping_card]</code> wurde möglicherweise falsch verwendet. Die folgenden Attribute sind verwendbar:
    </p>
    <ul>
        <li><code>form_id_likes</code> Verpflichtende TS Form-ID, in der die Like-Ergebnisse gespeichert wurden. </li>
        <li><code>form_id_dislikes</code> Verpflichtende TS Form-ID, in der die Dislike-Ergebnisse gespeichert wurden. </li>
    </ul>
    <ul>
        <li>Das Attribut <code>titel</code> kann optional benutzt werden, um der Seite einen eigenen Titel zu geben. Standardmäßig ist dieser ausgeblendet.</li>
        <li>Das Attribut <code>text-complete</code> kann optional benutzt werden, um ein Abschlusstext nach Bearbeitung aller Karten einzublenden. Standardmäßig lautet dieser "Sie haben alle Karten bearbeitet."  </li>
        <li>Das Attribut <code>like-btn-color</code> kann optional benutzt werden, um dem Like-Button eine Hintergrundfarbe zu geben. Standardmäßig ist die Farbe <code>#d3d3d3</code>.</li>
        <li>Das Attribut <code>like-icon</code> kann optional benutzt werden, um dem Like-Button ein Icon zu geben. Standardmäßig ist es das Icon <code>fa fa-check</code>.</li>
        <li>Das Attribut <code>like-icon-color</code> kann optional benutzt werden, um dem Like-Icon eine Farbe zu geben. Standardmäßig ist die Farbe <code>#008000</code>.</li>
        <li>Das Attribut <code>dislike-btn-color</code> kann optional benutzt werden, um dem Dislike-Button eine Hintergrundfarbe zu geben. Standardmäßig ist die Farbe <code>#d3d3d3</code>.</li>
        <li>Das Attribut <code>dislike-icon</code> kann optional benutzt werden, um dem Dislike-Button ein Icon zu geben. Standardmäßig ist es das Icon <code>fa fa-times</code>.</li>
        <li>Das Attribut <code>dislike-icon-color</code> kann optional benutzt werden, um dem Dislike-Icon eine Farbe zu geben. Standardmäßig ist die Farbe <code>#ff0000</code>.</li>
        <li>Das Attribut <code>undo-btn-color</code> kann optional benutzt werden, um dem Zurück-Button eine Hintergrundfarbe zu geben. Standardmäßig ist die Farbe <code>#d3d3d3</code>.</li>
        <li>Das Attribut <code>undo-icon-color</code> kann optional benutzt werden, um dem Zurück-Icon eine Farbe zu geben. Standardmäßig ist die Farbe <code>#000000</code>.</li>
        <li>Das Attribut <code>show-undo-btn</code> kann optional benutzt werden, um dem Zurück-Button ein- bzw. auszublenden. Standardmäßig ist der Zurück-Button eingeblendet.</li>
        <li>Das Attribut <code>undo-btn-mode</code> kann optional benutzt werden, um dem Modus für den Zurück-Button zu bestimmen. Durch Setzen auf den Wert "single" kann nur die letzte Karte und mit dem Wert "all" alle Karten zurückgenommen werden. Standardmäßig können alle Karten zurückgenommen werden.</li>
        <li>Das Attribut <code>repeat-btn-color</code> kann optional benutzt werden, um dem Wiederholen-Button eine Hintergrundfarbe zu geben. Standardmäßig ist die Farbe <code>#d3d3d3</code>.</li>
        <li>Das Attribut <code>repeat-icon-color</code> kann optional benutzt werden, um dem Wiederholen-Icon eine Farbe zu geben. Standardmäßig ist die Farbe <code>#0080ff</code>.</li>
        <li>Das Attribut <code>show-repeat-btn</code> kann optional benutzt werden, um dem Wiederholen-Button ein- bzw. auszublenden. Standardmäßig ist der Wiederholen-Button ausgeblendet.</li>
    </ul>
    <div class="beispiel m-5">
        <p>Beispiel:</p>
        <xmp style="white-space: initial ">
            [tspv2_swiping_card form_id_likes="123" form_id_dislikes="124" titel="Test Titel 1"]
        </xmp>
        <xmp style="white-space: initial ">
            <div class="swipingcard" title="Card 1 Title" title-color="#FFFFFF" content-color="#000000" bg-color="#FFFFFF" img-mode="0" img-src="hintergrundbild123.jpg"> Card Content 1 </div>
        </xmp>
        <xmp style="white-space: initial ">
            <div class="swipingcard" title="Card 2 Title" title-color="#FFFFFF" content-color="#FF5733" bg-color="#000000" img-mode="1" img-src="bild123" > Card Content 2 </div>
        </xmp>
        <xmp style="white-space: initial ">
            <div class="swipingcard" content-color="#FFFFFF" bg-color="#000000" > Card Content 3 </div>
        </xmp>
        <xmp style="white-space: initial ">
            [/tspv2_swiping_card]
        </xmp>
    </div>
</div>