<div class="modal-background">
    <div class="modal-container">
        <div class="modal-heading-container">
            <h1 class="modal-h1">Add Review Platform</h1>
        </div>
        <form id="add-review-plaform" name="add-review-plaform" method="get" class="form-list">
            <div class="review-platform-name">
                <div class="icon _32">
                    <!-- START Platform Logo - Replace with platform logo-->
                    <svg id="Google" xmlns="http://www.w3.org/2000/svg" height="32" viewbox="0 0 24 24" width="32"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"></path><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path><path d="M1 1h22v22H1z" fill="none"></path></svg>
                    <!-- END Platform Logo -->
                </div>
                <div>
                    <div class="review-platform-tile-name">{Platform Name}</div>
                    <div class="review-platform-tile-category">{Platform Category}</div>
                </div>
            </div>
            <div class="form-field-container">
                <div class="field-label-container">
                    <div class="flex full small-gap">
                        <label for="platform-id" class="field-label">{ID Label}</label>
                        <div class="required-star">*</div>
                        <div data-tippy-content="{ID Tooltip}" class="help-tooltip w-embed">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        </div>
                    </div>
                    <a class="flex small-gap w-inline-block" data-tippy-content="{How to find from CSV}">
                        <div  class="icon _12">
                            <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32"><polygon points="17 22 17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22"><path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z"></path><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path></polygon></svg>
                        </div>
                        <div class="text-extra-small">How to find this?</div>
                    </a>
                </div>
                <input class="form-field w-input" maxlength="256" name="platform-id" placeholder="{ID Label - from CSV}" type="text" id="platform-id" required="">
            </div>
            <div class="form-field-container">
                <div class="field-label-container full">
                    <div class="flex full space-between">
                        <label for="previewURL" class="field-label">Preview URL</label>
                        <a href="#" class="flex small-gap w-inline-block">
                            <div class="icon _12">
                                <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32"><path d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"></path><polygon points="20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2"></polygon></svg>
                            </div>
                            <div id="previewURL" name="previewURL" class="text-extra-small">Preview in a new window</div>
                        </a>
                    </div>
                </div>
                <div class="form-field disabled">{platform link including ID variable}</div>
            </div>
        </form>
        <div class="modal-close-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </div>
        <div class="form-button-container">
            <button type="button" class="button tertiary full w-button">Cancel</button>
            <button type="button" class="button full disabled w-button" disabled>Add Platform</button> <!-- button disabled if ID is empty, enable button when ID has value -->
        </div>
    </div>
</div>