{% set bundles = craft.sproutImport.getSproutImportBundles() %}

<div class="bundle-cards">

    {% for bundle in bundles %}

        <div class="bundle-card">
            <div class="bundle-header">
                <h6>{{ bundle.plugin.name ?? 'Sprout Import' }}</h6>
                <strong>{{ bundle.getName() }}</strong>
            </div>
            <div class="body">
                <p>{{ bundle.getDescription() }}</p>
            </div>
            <div class="buttons">
                <form method="post" accept-charset="utf-8">
                    {{ csrfInput() }}
                    {{ redirectInput("sprout-import/bundles") }}
                    <input type="hidden" name="action"
                        value="sprout-base-import/import/install-bundle">
                    <input type="hidden" name="className"
                        value="{{ bundle.getClassName() }}">

                    <button class="btn submit"
                        type="submit">{{ 'Install Bundle'|t }}</button>
                </form>
            </div>
        </div>

    {% endfor %}

</div>

{% css %}
    .bundle-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-gap: 20px;
    }

    .bundle-card {
    border: 1px solid #e3e5e8;
    border-radius: 5px;
    padding: 20px;
    }

    .bundle-card .body {
    margin-top: 8px;
    }

    @media (max-width: 600px) {
    .bundle-cards {
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    }
    }
{% endcss %}