<style>
:root{
    --e-a-color-white:#fff;
    --e-a-color-black:#000;
    --e-a-color-logo:#fff;
    --e-a-color-primary:#f3bafd;
    --e-a-color-primary-bold:#d004d4;
    --e-a-color-secondary:#515962;
    --e-a-color-success:#0a875a;-
    -e-a-color-danger:#dc2626;
    --e-a-color-info:#2563eb;
    --e-a-color-warning:#f59e0b;
    --e-a-color-accent:#93003f;
    --e-a-color-global:#1dddbf;
    --e-a-color-accent-promotion:#93003f;
    --e-a-bg-default:#fff;
    --e-a-bg-invert:#0c0d0e;
    --e-a-bg-hover:#f1f2f3;
    --e-a-bg-active:#e6e8ea;
    --e-a-bg-active-bold:#d5d8dc;
    --e-a-bg-loading:#f9fafa;
    --e-a-bg-logo:#000;
    --e-a-bg-primary:#fae8ff;
    --e-a-bg-secondary:#515962;
    --e-a-bg-success:#f2fdf5;
    --e-a-bg-info:#f0f7ff;
    --e-a-bg-danger:#fef1f4;
    --e-a-bg-warning:#fffbeb;
    --e-a-color-txt:#515962;
    --e-a-color-txt-muted:#818a96;
    --e-a-color-txt-disabled:#babfc5;
    --e-a-color-txt-invert:#fff;
    --e-a-color-txt-accent:#0c0d0e;
    --e-a-color-txt-hover:#3f444b;
    --e-a-color-txt-active:#0c0d0e;
    --e-a-border-color:#e6e8ea;
    --e-a-border-color-bold:#d5d8dc;
    --e-a-border-color-focus:#babfc5;
    --e-a-border-color-accent:#0c0d0e;
    --e-a-border:1px solid var(--e-a-border-color);
    --e-a-border-bold:1px solid var(--e-a-border-color-bold);
    --e-a-border-radius:3px;--e-a-btn-color:#0c0d0e;
    --e-a-btn-color-invert:var(--e-a-color-txt-invert);
    --e-a-btn-color-disabled:var(--e-a-color-txt-disabled);
    --e-a-btn-bg:#515962;
    --e-a-btn-bg-hover:#3a4046;
    --e-a-btn-bg-active:#23262a;
    --e-a-btn-bg-disabled:#d5d8dc;
    --e-a-btn-bg-primary:#f3bafd;
    --e-a-btn-bg-primary-hover:#f5d0fe;
    --e-a-btn-bg-primary-active:#f0abfc;
    --e-a-btn-bg-accent:#93003f;
    --e-a-btn-bg-accent-hover:#8f1a4c;
    --e-a-btn-bg-accent-active:#a93365;
    --e-a-btn-bg-info:#2563eb;
    --e-a-btn-bg-info-hover:#134cca;
    --e-a-btn-bg-info-active:#0e3b9c;
    --e-a-btn-bg-success:#0a875a;
    --e-a-btn-bg-success-hover:#06583a;
    --e-a-btn-bg-success-active:#03281b;
    --e-a-btn-bg-warning:#f59e0b;--e-a-btn-bg-warning-hover:#c57f08;
    --e-a-btn-bg-warning-active:#945f06;
    --e-a-btn-bg-danger:#dc2626;
    --e-a-btn-bg-danger-hover:#b21d1d;
    --e-a-btn-bg-danger-active:#861616;
    --e-a-dark-bg:#0c0d0e;--e-a-dark-color-txt:#9da5ae;
    --e-a-dark-color-txt-hover:#d5d8dc;
    --e-a-font-family:Roboto,Arial,Helvetica,sans-serif;
    --e-a-transition-hover:all .3s;
    --e-a-popover-shadow:0 2px 15px rgba(0,0,0,0.3);
    --e-a-dropdown-shadow:0 0 3px rgba(0,0,0,0.2)
}    
</style>
<style>
body{background:var(--e-a-color-white)}
.e-a-apps .e-a-page-title{margin:30px auto 60px;max-width:770px;text-align:center}
.e-a-apps .e-a-page-title h2{font-size:28px;margin:0;line-height:1.6}
.e-a-apps .e-a-page-title p{margin-block-start:0;font-size:16px}
.e-a-apps .e-a-page-title p a{color:inherit}
.e-a-apps .e-a-page-footer{margin:60px auto;text-align:center}
.e-a-apps .e-a-page-footer p{max-width:1200px;margin:auto}
.e-a-apps .e-a-list{display:grid;grid-gap:30px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.e-a-apps .e-a-item{border:var(--e-a-border);border-radius:var(--e-a-border-radius);display:flex;padding:20px 24px;flex-direction:column;align-items:flex-start;transition:var(--e-a-transition-hover)}
.e-a-apps .e-a-item:hover{border-color:var(--e-a-border-color-bold)}
.e-a-apps .e-a-heading{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.e-a-apps .e-a-heading .e-a-img{border-radius:var(--e-a-border-radius);width:70px;display:flex;margin-block-end:20px}
.e-a-apps .e-a-heading .e-a-badge{background:#ecfdf5;color:#047857;border-radius:100px;padding:3px 8px}
.e-a-apps .e-a-author,.e-a-apps .e-a-title{margin:0;line-height:1.6}
.e-a-apps .e-a-author{font-size:12px}
.e-a-apps .e-a-author a{color:inherit}
.e-a-apps .e-a-desc{flex-grow:1}
.e-a-apps .e-a-offering{font-size:12px;font-style:italic}
.e-a-apps .e-a-actions{display:flex;justify-content:space-between;align-items:center;width:100%;margin-block-start:20px}
.e-a-apps .e-a-actions a{text-decoration:none}
.e-a-apps .e-a-actions .e-accent{margin-inline-start:auto}
.e-a-apps .e-a-actions .e-a-learn-more{color:#4338ca;font-weight:500} 
.notice.e-notice {display: none !important;}
a.e-btn {font-size: 12px;font-weight: 500;line-height: 1.2;padding: 8px 16px;outline: none;border: none;border-radius: var(--e-a-border-radius);color: var(--e-a-btn-color-invert);transition: var(--e-a-transition-hover);}
.e-proqyz__primary { background-color: #7239ea;}
</style>

<?php 
    $list_addons    = [];
    $is_error       = false;
    $fetch_addons   = self::fetch_addons();
    if( isset( $fetch_addons['error'] ) ) {
        $is_error = true;
        $error    = $fetch_addons['error'];
    } else {
        $list_addons = (array) $fetch_addons;
    }
?>
<div class="wrap e-a-apps">
    <div class="e-a-page-title">
        <h2>Your favourite apps are on ProQyz</h2>
        <p>
        ProQyz connects with dozens of third-party apps to let you run your business your way.
        </p>
    </div>
    
    <?php if(!$is_error){ ?> 
        <?php if(count($list_addons) > 0 ) { ?>
        <div class="e-a-list">   
            <?php foreach( $list_addons as $lkey => $addon ) {
                $addon = (object) $addon;
                ?>
                <div class="e-a-item">
                    <div class="e-a-heading">
                        <img class="e-a-img" src="<?php echo $addon->svg; ?>" alt="<?php echo $addon->title; ?>">
                        <?php  if(isset($addon->badge)){ ?> <span class="e-a-badge"><?php echo $addon->badge; ?></span><?php } ?>
                    </div>
                    <h3 class="e-a-title"><?php echo $addon->title; ?></h3>
                    <p class="e-a-author">By <a href="<?php echo $addon->author_url; ?>" target="_blank"><?php echo $addon->author; ?></a></p>
                    <div class="e-a-desc">
                        <?php echo $addon->description; ?>
                    </div>
                    <p class="e-a-actions">
                        <a class="e-a-learn-more" href="<?php echo $addon->learn_more_url; ?>" target="_blank">Learn More</a>
                        <a href="<?php echo $addon->plugin_url; ?>" class="e-btn e-proqyz__primary" target="_self">Get</a>
                    </p>
                </div>
                <?php 
            } ?>
        </div>
        <?php } else { ?>
            <div class="notice inline notice-info notice-alt">
                <p> no addons found </p>                   
            </div>
        <?php } ?>
    <?php } ?>  
    
    <?php if($is_error) { ?>
        <div class="notice inline notice-error notice-alt">
            <p><?php echo $error; ?> </p>                   
        </div>
    <?php } ?>
    
</div>