{$layout}

<style>
.httpdns-sdk-cards {
    margin-top: 1em;
}
.httpdns-sdk-cards > .card {
    min-height: 168px;
}
.httpdns-sdk-desc {
    margin-top: .6em;
    color: #5e6c7b;
}
.httpdns-sdk-meta {
    margin-top: .35em;
    color: #9aa6b2;
    font-size: 12px;
}
.httpdns-sdk-actions {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    flex-wrap: wrap;
}
.httpdns-sdk-actions .button {
    padding-left: .8em !important;
    padding-right: .8em !important;
}
</style>

<second-menu>
    <a class="item" :href="'/httpdns/apps/domains?appId=' + app.id">{{app.name}}</a>
    <span class="item disabled" style="padding-left: 0; padding-right: 0">&raquo;</span>
    <div class="item"><strong>SDK 集成</strong></div>
</second-menu>

<div style="margin-top: 1em; text-align: right">
    <a class="ui button tiny blue" :href="'/httpdns/apps/sdk/upload?appId=' + app.id">
        <i class="icon upload"></i> 上传 SDK/文档
    </a>
</div>

<div class="ui three stackable cards httpdns-sdk-cards">
    <div class="card">
        <div class="content">
            <div class="header"><i class="icon android green"></i> Android SDK</div>
            <div class="httpdns-sdk-meta">Java / Kotlin</div>
            <div class="description httpdns-sdk-desc">适用于 Android 客户端接入。</div>
        </div>
        <div class="extra content">
            <div class="httpdns-sdk-actions">
                <a class="ui button compact mini basic" href="/httpdns/apps/sdk/download?platform=android" @click="downloadSDK('android', $event)"><i class="icon download"></i> 下载 SDK</a>
                <a class="ui button compact mini basic" href="/httpdns/apps/sdk/doc?platform=android" @click="downloadDoc('android', $event)"><i class="icon book"></i> 下载文档</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="content">
            <div class="header"><i class="icon apple grey"></i> iOS SDK</div>
            <div class="httpdns-sdk-meta">Objective-C / Swift</div>
            <div class="description httpdns-sdk-desc">适用于 iOS 客户端接入。</div>
        </div>
        <div class="extra content">
            <div class="httpdns-sdk-actions">
                <a class="ui button compact mini basic" href="/httpdns/apps/sdk/download?platform=ios" @click="downloadSDK('ios', $event)"><i class="icon download"></i> 下载 SDK</a>
                <a class="ui button compact mini basic" href="/httpdns/apps/sdk/doc?platform=ios" @click="downloadDoc('ios', $event)"><i class="icon book"></i> 下载文档</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="content">
            <div class="header"><i class="icon mobile alternate blue"></i> Flutter SDK</div>
            <div class="httpdns-sdk-meta">Dart / Plugin</div>
            <div class="description httpdns-sdk-desc">适用于 Flutter 跨平台接入。</div>
        </div>
        <div class="extra content">
            <div class="httpdns-sdk-actions">
                <a class="ui button compact mini basic" href="/httpdns/apps/sdk/download?platform=flutter" @click="downloadSDK('flutter', $event)"><i class="icon download"></i> 下载 SDK</a>
                <a class="ui button compact mini basic" href="/httpdns/apps/sdk/doc?platform=flutter" @click="downloadDoc('flutter', $event)"><i class="icon book"></i> 下载文档</a>
            </div>
        </div>
    </div>
</div>