<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Podstalk — Import Episodes</title>
    <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />
    <link rel="stylesheet" href="/static/import.css" />
</head>
<body>
    <nav class="nb-navbar" role="navigation" aria-label="Main navigation">
        <a href="/" class="nb-navbar-brand" aria-label="Go to homepage">Podstalk</a>
        <ul class="nb-navbar-nav" role="menubar">
            <li class="nb-navbar-item" role="none">
                <a href="/" class="nb-navbar-link" role="menuitem">Dashboard</a>
            </li>
            <li class="nb-navbar-item" role="none">
                <a href="/signout" class="nb-navbar-link" role="menuitem">Sign Out</a>
            </li>
        </ul>
    </nav>
    <div class="container">
        {{if .Error}}<div class="flash flash-error">{{.Error}}</div>{{end}}

        <h2>Import Episodes from RSS</h2>

        {{if not .Fetched}}
        <form method="post" action="/import">
            <div class="nb-form-group">
                <label for="rss_url">RSS Feed URL</label>
                <input type="url" id="rss_url" name="rss_url" class="nb-input blue" required autofocus
                    value="{{if .RSSURL}}{{.RSSURL}}{{end}}"
                    placeholder="https://example.com/podcast.xml" />
            </div>
            <div class="form-actions">
                <button type="submit" class="nb-button green">Fetch Episodes</button>
                <a href="/" class="nb-button default">Cancel</a>
            </div>
        </form>
        {{end}}

        {{if .Fetched}}
        <form method="post" action="/import">
            <input type="hidden" name="rss_url" value="{{.RSSURL}}" />
            <input type="hidden" name="import" value="1" />

            <div class="nb-table-container">
                <div class="nb-table-header">{{len .Episodes}} Episodes Found</div>
                <table class="nb-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="select-all" onclick="toggleAll(this)" />
                            </th>
                            <th>Title</th>
                            <th>Published</th>
                            <th>Audio</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{range .Episodes}}
                        <tr>
                            <td>
                                <input type="checkbox" name="selected" value="{{.Index}}" />
                            </td>
                            <td>
                                <div class="ep-title">{{.Title}}</div>
                                {{if .Description}}<div class="ep-desc">{{.DescriptionTruncated}}</div>{{end}}
                            </td>
                            <td class="ep-date">{{.PubDate}}</td>
                            <td>{{if .AudioURL}}<span class="audio-badge">✓</span>{{else}}—{{end}}</td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>

            <div class="form-actions">
                <button type="submit" class="nb-button green">Import Selected</button>
                <a href="/" class="nb-button default">Cancel</a>
            </div>
        </form>
        {{end}}
    </div>

    <script>
        function toggleAll(master) {
            var checkboxes = document.querySelectorAll('input[name="selected"]');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = master.checked;
            }
        }
    </script>
</body>
</html>
