<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="#2f2f2f"
    android:padding="20dp">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="5dp"
        app:strokeColor="@android:color/darker_gray"
        app:strokeWidth="0.5dp"
        app:cardCornerRadius="0dp"
        app:cardBackgroundColor="#444444"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/gray_border"
                >

                <com.stripe.android.view.CardNumberEditText
                    android:id="@+id/card_number"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"

                    android:textColorHint="@android:color/darker_gray"
                    android:hint="@string/card_number"
                    android:fontFamily="@font/nunito_regular"
                    android:textColor="@color/white"
                    android:textAppearance="@style/TextAppearance.Material3.TitleSmall"

                    android:background="@android:color/transparent"
                    android:padding="15dp"

                    android:layout_toStartOf="@id/card_brand"
                    />

                <com.stripe.android.view.CardBrandView
                    android:id="@+id/card_brand"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"

                    android:layout_marginHorizontal="15dp"

                    />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:weightSum="2"
                android:orientation="horizontal">

                <com.stripe.android.view.ExpiryDateEditText
                    android:id="@+id/expiry_date"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"

                    android:background="@drawable/gray_border"
                    android:padding="15dp"

                    android:hint="@string/mm_yy"
                    android:textColorHint="@android:color/darker_gray"
                    android:fontFamily="@font/nunito_regular"
                    android:textColor="@color/white"
                    android:textAppearance="@style/TextAppearance.Material3.TitleSmall"

                    android:nextFocusRight="@id/cvv"

                    />

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/gray_border"
                    android:layout_weight="1">

                    <com.stripe.android.view.CvcEditText
                        android:id="@+id/cvv"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"

                        android:background="@android:color/transparent"
                        android:padding="15dp"

                        android:hint="@string/mm_yy"
                        android:textColorHint="@android:color/darker_gray"
                        android:fontFamily="@font/nunito_regular"
                        android:textColor="@color/white"
                        android:textAppearance="@style/TextAppearance.Material3.TitleSmall"

                        android:layout_toStartOf="@id/cvc_icon"

                        />

                    <ImageView
                        android:id="@+id/cvc_icon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_cvc"
                        android:layout_alignParentEnd="true"
                        android:layout_centerVertical="true"
                        android:layout_marginEnd="10dp"
                        android:layout_marginStart="5dp"
                        app:tint="@android:color/darker_gray" />

                </RelativeLayout>

            </LinearLayout>

        </LinearLayout>

    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/payButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:backgroundTint="@color/color_primary"
        android:enabled="false"
        android:text="@string/subscribe"
        tools:text="Pay $53.5"
        android:textAllCaps="false"
        android:fontFamily="@font/nunito_bold"
        android:textColor="@color/white"
        android:paddingVertical="10dp"
        android:drawableEnd="@drawable/ic_locked_filled"
        app:cornerRadius="5dp"
        />

</LinearLayout>